python Bottleの基本12 Button iPhone Web App

# このテーマは、iPhone App用にボタンをサクッと作るためのテンプレートです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/dfe9637e-353e-1c68-a1bc-e4e907ac7caa.png)
##サンプルとして3種類用意する。
|クラス名|width|height|font size
|-----------------|------------------|------------------|------------------|
.bsz2|137px|137px| small  |
.bsz3|88px |88px | small  | 
.bsz4|64px |64px | x-small|
##buttonを生成用関数は、

```py
def Button_(btn,clas,id='id'):
    Hn="{0}"
    return "".join(["<button class='{0}' id='{3}{2}'>{1}</button>"
                    .format(clas,Hn.format(x),i,id) for i,x in enumerate(btn)])
```
btnは、ボタンラベルの配列
clasは、bootstrap4のクラスを定義する。
idは、idのラベルを定義する。

## 通常のBootstrap4を用いない例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c1acbd0b-6bd3-ebf5-eece-f8085f988d77.png)

```py
def normalButton():
    return "".join(["<input  type='button' value='Normal:{0}'/>"
                    .format(i) for i in range(12)])
```
このようにbootstrap4を用いると絵心ない人でもきれいなUIを作れます。

##HTMLは、CSSを用いて大きさや並べ方指定して構成します。
### iPhoneなどのスマートフォンなどでButton UIを作成するためには、ボタンのサイズとボタン間のマージンを設定することで見栄えのするUIを構築できます。
## 基本的な色は、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/34dbc20a-306d-a884-eff4-54727558aedc.png)

|　青　|　灰　|　緑　|　赤　|　黄　|　水　|　白　|　黒　|
|-------|-------|-------|------|-------|----|----|----|
|primary|secondary|success|danger|warning|info|light|dark|

#Color Button Sample 139種類
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/d89e6a98-cd99-60f8-1ab7-e22d343539f0.png)


##　一方HTMLによく使われる カラーデータは、以下の通りです。
```py
sColor=["lightsalmon","salmon","darksalmon","lightcoral","indianred","crimson","firebrick","red","darkred","coral",
"tomato","orangered","gold","orange","darkorange","lightyellow","lemonchiffon","lightgoldenrodyellow","papayawhip","moccasin",
"peachpuff","palegoldenrod","khaki","darkkhaki","yellow","lawngreen","chartreuse","limegreen","lime","forestgreen",
"green","darkgreen","greenyellow","yellowgreen","springgreen","mediumspringgreen","lightgreen","palegreen","darkseagreen","mediumseagreen",
"seagreen","olive","darkolivegreen","olivedrab","lightcyan","cyan","aqua","aquamarine","mediumaquamarine","paleturquoise",
"turquoise","mediumturquoise","darkturquoise","lightseagreen","cadetblue","darkcyan","teal","powderblue","lightblue","lightskyblue",
"skyblue","deepskyblue","lightsteelblue","dodgerblue","cornflowerblue","steelblue","royalblue","blue","mediumblue","darkblue",
"navy","midnightblue","mediumslateblue","slateblue","darkslateblue","lavender","thistle","plum","violet","orchid",
"fuchsia","magenta","mediumorchid","mediumpurple","blueviolet","darkviolet","darkorchid","darkmagenta","purple","indigo",
"pink","lightpink","hotpink","deeppink","palevioletred","mediumvioletred","white","snow","honeydew","mintcream",
"azure","aliceblue","ghostwhite","whitesmoke","seashell","beige","oldlace","floralwhite","ivory","antiquewhite",
"linen","lavenderblush","mistyrose","gainsboro","lightgray","silver","darkgray","gray","dimgray","lightslategray",
"slategray","darkslategray","black","cornsilk","blanchedalmond","bisque","navajowhite","wheat","burlywood","tan",
"rosybrown","sandybrown","goldenrod","peru","chocolate","saddlebrown","sienna","brown","maroon",]
```

Visual studio 2019 を使ってcodingしているなら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c60fba36-2ba9-c2d6-01b6-e6becfbc6b48.png)

[Web Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler)を用いれば簡単にscssからbootstrapを再コンパイルすることができます。


```scss
$theme-colors:(
"lightsalmon":#FFA07A,
"salmon":#FA8072,
"darksalmon":#E9967A,
"lightcoral":#F08080,
"indianred":#CD5C5C,
"crimson":#DC143C,
"firebrick":#B22222,
"red":#FF0000,
"darkred":#8B0000,
"coral":#FF7F50,
"tomato":#FF6347,
"orangered":#FF4500,
"gold":#FFD700,
"orange":#FFA500,
"darkorange":#FF8C00,
"lightyellow":#FFFFE0,
"lemonchiffon":#FFFACD,
"lightgoldenrodyellow":#FAFAD2,
"papayawhip":#FFEFD5,
"moccasin":#FFE4B5,
"peachpuff":#FFDAB9,
"palegoldenrod":#EEE8AA,
"khaki":#F0E68C,
"darkkhaki":#BDB76B,
"yellow":#FFFF00,
"lawngreen":#7CFC00,
"chartreuse":#7FFF00,
"limegreen":#32CD32,
"lime":#00FF00,
"forestgreen":#228B22,
"green":#008000,
"darkgreen":#006400,
"greenyellow":#ADFF2F,
"yellowgreen":#9ACD32,
"springgreen":#00FF7F,
"mediumspringgreen":#00FA9A,
"lightgreen":#90EE90,
"palegreen":#98FB98,
"darkseagreen":#8FBC8F,
"mediumseagreen":#3CB371,
"seagreen":#2E8B57,
"olive":#808000,
"darkolivegreen":#556B2F,
"olivedrab":#6B8E23,
"lightcyan":#E0FFFF,
"cyan":#00FFFF,
"aqua":#00FFFF,
"aquamarine":#7FFFD4,
"mediumaquamarine":#66CDAA,
"paleturquoise":#AFEEEE,
"turquoise":#40E0D0,
"mediumturquoise":#48D1CC,
"darkturquoise":#00CED1,
"lightseagreen":#20B2AA,
"cadetblue":#5F9EA0,
"darkcyan":#008B8B,
"teal":#008080,
"powderblue":#B0E0E6,
"lightblue":#ADD8E6,
"lightskyblue":#87CEFA,
"skyblue":#87CEEB,
"deepskyblue":#00BFFF,
"lightsteelblue":#B0C4DE,
"dodgerblue":#1E90FF,
"cornflowerblue":#6495ED,
"steelblue":#4682B4,
"royalblue":#4169E1,
"blue":#0000FF,
"mediumblue":#0000CD,
"darkblue":#00008B,
"navy":#000080,
"midnightblue":#191970,
"mediumslateblue":#7B68EE,
"slateblue":#6A5ACD,
"darkslateblue":#483D8B,
"lavender":#E6E6FA,
"thistle":#D8BFD8,
"plum":#DDA0DD,
"violet":#EE82EE,
"orchid":#DA70D6,
"fuchsia":#FF00FF,
"magenta":#FF00FF,
"mediumorchid":#BA55D3,
"mediumpurple":#9370DB,
"blueviolet":#8A2BE2,
"darkviolet":#9400D3,
"darkorchid":#9932CC,
"darkmagenta":#8B008B,
"purple":#800080,
"indigo":#4B0082,
"pink":#FFC0CB,
"lightpink":#FFB6C1,
"hotpink":#FF69B4,
"deeppink":#FF1493,
"palevioletred":#DB7093,
"mediumvioletred":#C71585,
"white":#FFFFFF,
"snow":#FFFAFA,
"honeydew":#F0FFF0,
"mintcream":#F5FFFA,
"azure":#F0FFFF,
"aliceblue":#F0F8FF,
"ghostwhite":#F8F8FF,
"whitesmoke":#F5F5F5,
"seashell":#FFF5EE,
"beige":#F5F5DC,
"oldlace":#FDF5E6,
"floralwhite":#FFFAF0,
"ivory":#FFFFF0,
"antiquewhite":#FAEBD7,
"linen":#FAF0E6,
"lavenderblush":#FFF0F5,
"mistyrose":#FFE4E1,
"gainsboro":#DCDCDC,
"lightgray":#D3D3D3,
"silver":#C0C0C0,
"darkgray":#A9A9A9,
"gray":#808080,
"dimgray":#696969,
"lightslategray":#778899,
"slategray":#708090,
"darkslategray":#2F4F4F,
"black":#000000,
"cornsilk":#FFF8DC,
"blanchedalmond":#FFEBCD,
"bisque":#FFE4C4,
"navajowhite":#FFDEAD,
"wheat":#F5DEB3,
"burlywood":#DEB887,
"tan":#D2B48C,
"rosybrown":#BC8F8F,
"sandybrown":#F4A460,
"goldenrod":#DAA520,
"peru":#CD853F,
"chocolate":#D2691E,
"saddlebrown":#8B4513,
"sienna":#A0522D,
"brown":#A52A2A,
"maroon":#800000);
@import "./scss/bootstrap";
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/afe50041-43fe-20d5-fabf-ad25b8b5557a.png)

##[詳しい解説は、](https://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/a41be8ff-1ff8-14d3-765d-849f2b0f8f2a.png)

# このような金銀銅も可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/05830358-1157-05a8-1165-b2dda0ee28c3.png)

```html
<div class="d-inline-block p-5 bg-dark text-white">
<button class='bsz2 btn btn-gold m-1 rounded-pill'><h3><b>gold</b></h3></button>
<button class='bsz2 btn btn-silver m-1 rounded-pill'><h3><b>silver</b></h3></button>
<button class='bsz2 btn btn-bronze m-1 rounded-pill'><h3><b>bronze</b></h3></button></div>
```
# btn-gold btn-silver btn btn-bronzeが新しく追加したボタンです。

#[ソースコードは、githubにあげておきます。](https://github.com/yutakahirata/ex14.py)