bootstrap
bootstrapのサイトにアクセスする。
Bootstrapを、そのまま使用するのなら、CDNをコピーするだけで使える。
style.cssを読み込む、直前の部分に貼り付ける。
(link rel="stylesheet" href="css/style.css")
//htmlに、決められたタグを入れることでBootstrapが勝手に調整してくれる。//
<body>
<div class="container">
<header...>
</div>
</body>
//全体を,<div class="container">で囲む。//
グリッドシステム
<div class="row">
//class名はrow//
<div class="col-○○-1~12>
//colはカラム、○の部分はxs,sm,md,lg、数字は使うカラムの数//
オフセット
<div class="col-sm-8 col-sm-offset-2">
//真ん中のカラムを8つ使わず、左右にカラムを2つずつ振り分ける。//
<div class="col-sm-offset-3 col-sm-offset-3">
//前のカラムを3つ確保して、そのあとにカラムを3つ使う。//
<div class="col-sm-6 col-sm-offset-3">
//左右に3つずつカラムを振り分けて、真ん中に6つカラムを使う。//
ラベル、テキストフィルム
<label for="name">お名前</label>
<input type="text" id="name" name="name">
//ラベルとテキストフィルムを作れる。タイプ属性には色々ある。//
<class=”form-control”>
//Bootstrapのformsから色んな見た目を作れる。//
プレースフォルダー
placeholder="例"
//例文を作れる。//
ドロップダウンリスト
<div class="form-group">
<label for="job">ご職業
<span class="badge badge-danger">必須</span>
</label>
<select id="job" name="job" class="form-control"
size="3" multiple>
<option value="">選択してください</option>
</div>
//ドロップダウンリストを作れる。都道府県名など、選択するものが決まっている時に、有効。class="badge badge-danger”は必須アイコン。//
チェックボックス
<div class="form group">
<label>知りたい内容(複数回答可</label>
<div class="checkbox">
<label>
<input type="checkbox" name="q1" value="html"> HTML
</label>
</div>
</div>
//チェックボックスを作れる。class=checkboxはBootstrapの指定。name属性は統一する。//
ラジオボタン
<div>
<label class="radio-inline">
<input type="radio" name="q2" value="1">
</label>
</div>
//ラジオボタンを作れる。radio-inlineで横に並べる。//
テキストエリア
<div class="form-group">
<label for="message">ご意見</label>
<textarea name="message" rows="10"
class="form-control></textarea>
</div>
//テキストエリアが作れる。rowsは行数。//
ボタン
<button type="submit" class="btn btn-default">送信する</button>
//ボタンを作れる。他にも種類がある。primary、success、info、warning、danger、link。//