読者です 読者をやめる 読者になる 読者になる

ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

便利なBootstrap

こんにちは!エンジニアインターンの土屋です!
今日はbootstrapの基本的なことについて今まで学んだことを書いていきたいと思います!!

複雑なレイアウトも簡単にレスポンシブ対応できるグリッドシステム

サイトの横幅を12分割にして均等に分けるガイドラインをグリッドと呼びます。 実際にこんなカラフルに色は付いていません。今回は分かりやすくするために付けました。 f:id:yourmystar_engineer:20170324184204p:plain そのグリッドを利用してレイアウトできる仕組みをグリッドシステムと呼びます。 ガイドラインであるグリッドに合わせてレイアウトしておけば、簡単にレスポンシブに対応させることができます。

画面幅に合わせて変わる1カラムの幅

f:id:yourmystar_engineer:20170324184516p:plain Bootstrapのサイトに行くとこのような表があります。 これが、カラムの種類です。 col-mdはデバイス幅が992px〜1199pxのときの画面分割、 col-xsはデバイス幅が767px以下のときの画面分割のことを表しています。 これを利用して、レスポンシブ対応させることができます。

カラムの間に隙間を作りたい

グリッドシステムではcol-mdやcol-xsを使いましたが、それぞれの要素の間に隙間をつくるにはオフセットを使います。 col-md-offset-1のように空けたい分だけ、カラムと同じ種類のものを使って書いていきます。

 <div class="container">
    <div class="row main">
        <div class="col-md-4 col-xs-12 pink">カラム1</div>
           <div class="col-md-7 col-md-offset-1 col-xs-12 orange">カラム2</div>
     </div>
</div>


f:id:yourmystar_engineer:20170324190655p:plain

containerとcontainer-fulid

container-fluidはデバイス幅いっぱいに要素を表示させます。 画面いっぱいいっぱいなので表示させるものもそれに合わせて滑らかに大きく小さくなります。

https://i.gyazo.com/d84460c913bcba82d8dda07c9374555a.gif

これに対してcontainerはcol-lg、col-md、col-sm、col-xsの画面幅に合わせてそれ以上以下になったら、要素をカクッと変えます。


https://i.gyazo.com/4c4601ae90f958ec8a203f71c03fa08b.gif




他にも様々な用途に応じて活用できます!!!
以上、土屋でした! www.wivern.com