(Bootstrap) Bootstrapの基本機能まとめ

bootstrap-basic-rules

 

Bootstrapのメモ書き。
とりあえずBootstrapの基本的なことについてだけ。
汎用的に使えるクラス名の紹介とかはなし。

 

グリッドシステム

グリッドシステムとは、
webページ全体を12列に分けて構成するシステム

グリッドシステムを使う範囲は、
その範囲をcontainer、またはcontainer-fluidのクラスで囲む。

<body>

<div class=“container”>

ここにグリッドシステムで記入

</div>

</body>

 

class=“container”

一定のウィンドウの幅ごとに、表示される内部の幅(固定)が決まっている。

 

class=“container-fluid”

ウィンドウの幅と、内部の幅が常に連動する

 

グリッドシステム:列に関して

class=“col-xs-N”(Nが数字)のようにclass名の一部を使って列数を指定することで、
要素の横幅を指定できる。はみ出した分(12列を超えた場合)は、次の行に送られる。

 

グリッドシステム:行に関して

行のコンテナのdiv要素などに、class=“raw”のclassを指定して、行であることを指定する。
これはなくても書けるが、書いた方がよい。

 

グリッドシステムはネストも可能

グリッドの列の中にまたグリッドを埋め込むことも可能
その場合、入れ子にしたグリッドも合計12列になるようにグリッドを組む点に注意。

 

グリッドシステム関連のクラスの一部

class=“col-xs-offset-N”

入力した数字の列分、感覚を開ける

 

class=“col-xs-pull-N”

入力した数字の列分、左にずらす

 

class=“col-xs-pull-N”

入力した数字の列分、右にずらす

 

レスポンシブクラス名対応表

大きい画面用のクラス名ほど優先度が高い。

画面幅 0px~ 768px~ 992px~ 1200px~
クラス col-xs-N col-sm-N col-md-N col-lg-N
ケース スマフォ タブレット PC PC大

 

要素の表示/非表示

class=“hidden-○○”

画面が指定した大きさの場合、要素を非表示にする

 

class=“visible-○○”

画面が指定した大きさの場合、要素を表示する

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。