0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

自分用

0
Last updated at Posted at 2019-11-02

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。//

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?