Bootstrapの使い方

Bootstrapの使い方についてのまとめです。 ・bootstrapとは BootstrapはTwitterが開発した無償でダウンロードし利用することが可能なCSSフレームワークです。 webデザインに関する知識が少ない人でも簡単に見栄えのいいサイトを作ることが可能で、全ての機能がレスポンシブデザインに対応しているのが特徴です。 そのため、スマートフォン向けのサイトを作る際にもとても便利で多くの人がBootstrapを利用しています。   ・導入方法 はじめに下記の公式サイトからBootstrapをダウンロードします。 http://getbootstrap.com/ bootdl ダウンロードしたZIPファイルを解凍すると下記のようにcss,font,jsというファイルが入っているので使用したいファイルにそれぞれコピーして配置します。 bootfile
<script type='text/javascript' src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
HTMLのhead内にそれぞれ参照するファイルを読み込ませます。 Bootstrapはjqueryを活用しているので必ず用意しましょう。 使用する前の導入は以上です。 それでは実際に代表的な機能をいくつか紹介します。   ・グリッドシステム グリッドシステムとは、要素の横幅を割合で指定してカラムを整えることができるシステムです。 bootstrapでは12本のグリッドを利用してカラムを指定することができます。 6:6の2カラムや4:4:4の3カラムのように均等にしたり、6:3:3や5:4:3のように不規則な割合でも合計が12なっていれば問題なく機能します。
<div class="container">
 <div class="row">
  <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6">
  </div>
  <div class="col-xs-9 col-sm-8 col-md-7 col-lg-6">
  </div>
 </div>
</div>
グリッドシステムを使うためには、始めにclass=”contener”とその中にclass=”row”を用意する必要があります。 そしてclass=”row”の中にカラムを指定するための要素、class=”col”を書き込みます。 xs,sm,md,lgというのは表示される画面の大きさに合わせて書いてください。 それぞれ、xs=749px以下(スマートフォン等),sm=969px以下(タブレット等),md=1169px以下(PC等),lg=1170以上(PC大画面)の場合に適用される値です。 つまり、上記のHTMLはxsの時に3:9、smの時に4:8、mdの時に5:7、lgの時に6:6で表示するというコードになっています。   ・カラムのオフセット カラムのオフセットはカラムに空白を入れたいときに使える機能です。 col-md-offset-* *の部分にカラムの値を入れることで指定した要素の左側に、入れたカラムの値の分余白ができます。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-md-offset-2">
  </div>
  <div class="box2 col-md-4">
  </div>
 </div>
</div>
css
.container{
width: 1000px;
 background-color: gray;
}

.box1{
background-color: black;
height: 200px;
}

.box2{
background-color: orange;
height: 200px;
}
bootclm1 1000pxのcontainerの中に両端余白、中央にboxを寄せる形のコードです。 box1の左側に2カラムの余白を入れ、4カラムのbox1,box2が続き、最後に残った2カラム分の余白が残ります。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-md-offset-2">
  </div>
  <div class="box2 col-md-4">
  </div>
 </div>
</div>
bootclm2 同様にbox2の方にoffsetをつければ、box2の左側に余白ができます。   ・カラムの順序変更 col-md-push-*とcol-md-pull-*を使用することで表示画面(ブラウザ)の大きさによって表示するカラムの位置を変更することができます。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4 col-lg-push-4">
  </div>
  <div class="box2 col-md-4 col-lg-pull-4">
  </div>
 </div>
</div>
bootcol4 bootcol3 画面がmd以下の時にはbox1が左に、lgの時はbox1が右に来るようになっています。   ・レスポンシブ・ユーティリティ 画面の大きさによってカラムの表示/非表示を切り替えたり、表示の仕方(block、inline、inline-block)を設定することができる機能です。 visible-*-* hidden-* visibleは表示を指示します。visible-md-blockという感じで画面のサイズと表示方法を設定します。 hiddenは非表示を指示します。表示方法の選択を不要なのでhidden-mdのようにサイズのみ設定します。 html
<div class="container">
 <div class="row">
  <div class=" box1 col-md-4">
  </div>
  <div class="box2 col-md-4 hidden-lg">
  </div>
 </div>
</div>
bootcol5 bootcol4 画面がlgの時にはbox2を非表示にし、md以下で表示されるようになっています。   ・ヘルパークラス ヘルパークラスはあらかじめbootstrapで用意されているclassでとても便利な機能です。 img-responsive class=”img-responsive” には display:block, height:auto, max-width: 100% の3つのスタイルが定義されていて、画像を表示画面の大きさに合わせて拡大、縮小させることができます。 center-block class=”center-block” には display: block, margin-left: auto, margin-right: auto の3つのスタイルが定義されていてブロック要素を表示画面の大きさに関わらず親要素の中央に配置することができます。 text-center class=”text-center” には text-align:center のスタイルが定義されていて、文字を画面の大きさに関わらず親要素の中央に配置することができます。 clearfix class=”clearfix” には :after{content:” “, display:block, clear:both} が定義されていてスマートな記述で要素を横並びに配置することができます。   ・その他の機能 formやbutton、tableなどもあらかじめbootstrapで用意されていて、公式サイトから直接コピーペーストして使用できるのでとても便利です。  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です