<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
<li><a href="#tab2" data-toggle="tab">Profile</a></li>
<li><a href="#tab3" data-toggle="tab">Messages</a></li>
</ul>

全体でいうとこういった感じです。

http://bootstrap3-guide.com/compornent/navs.html

ナビはピル型にもできるようです。

data-toggle="pill"

カプセルのようにボタンっぽいタイプのナビです。

2017-06-20

Bootstrap参考おすすめサイト

bootstrapブートストラップ

ブートストラップを使ったり、学習したりしたいときにおすすめのサイト様をまとめています。

2017-06-20

alertを使ってみる

bootstrapブートストラップ

メッセージをだしてみたいと思います。

参考にしたサイト様

https://webnetamemo.com/coding/bootstrap/201702264279

学習したいかたは上記のサイト様をご覧下さい。

以下、自分のための備忘録。

アラートのデザインにするには、

divに.alert ＋ .alert-success等のクラスをつけるそうです

デフォルトがないみたいなので、

下記の種類から選ぶ必要が。

role（役割）がなくてもデザインには影響なさそうだけど、

一応つけておこうと思います。

閉じるボタン

divに alert-dismissibleをつけて、ボタンリンクを用意すると

閉じることもできるようです。

<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">×</span></button>
<strong>warning</strong>：　このメッセージは閉じることができます。
</div>

リンク

アラート内でのリンクにはalert-linkクラスを指定してげると、

レイアウトが統一されてよさそうです。

2017-06-20

tableをレイアウトしてみる

bootstrapブートストラップ

ランキングの表をつくりたくてtableの使い方を調べました。

まだまだ不明なこと多いですが。

参考にしたサイト様

https://webnetamemo.com/coding/bootstrap/2015062126

http://www.atmarkit.co.jp/ait/articles/1403/19/news034_3.html

では、備忘録まとめ。

tableにbootstarpのレイアウトを適用させるには、

tableタグにclass="table"としてクラス指定する必要があるようです。

<thead>と<tbody>をわけて、

<thead>内を<ｔｈ>にしておくと、デザイン的にいい感じになります。

１行ごとに色を変える

.table-stripedをtableタグに指定するといわゆるストライプな感じになります。

ホバー

マウスが行が重なったときにホバーするには

tableタグに.table-hoverを追加

わたしはスマホメインのサイトを作るのであまり関係ないかも

カラーリング

.active
.success     成功
.info     情報
.warning     注意、警告
.danger     危険、エラー

これは、tableだけじゃないけど、

tdやtrに指定すると色が変わる。

2017-06-20

bootstrapのレイアウトの基本を知る

bootstrapブートストラップ

さっそくbootstrapを使っていこうかな、と思います。

今回、参考にさせていただいたのはこちらのサイト様です。

https://webnetamemo.com/coding/bootstrap/20150629450

http://www.tohoho-web.com/ex/bootstrap.html

詳しくは、上記サイト様をご覧いただくのがベストだと思います。

以下、備忘録。

グリッドシステム

bootstrapはグリッドシステムというのを採用しているようで

12分割する方式でレイアウトを組むようです。

<div class="row">

を行にみたてて囲み

<div class="col-md-6">

を列にみたててrowの中にいれるようです

この6っていうのを、合計すると12になれば１行ってことなので、

この場合、あと6スペースが使える

なるほど。

mdってのは、画面サイズのことのようです。

ミドルサイズの画面の場合、このクラス指定が適用される、という認識でしょうか。

mdと指定した場合、それより小さいと無視されている感じです。

つまり、xsで指定しておけばどのサイズでも適用される感じですね。

別途サイズ指定しなければ。

サイズに関して

モバイル（スマホ）　768px未満     エクストラスモール=xs     col-xs-*
タブレット768px以上992px未満     スモール=sm     col-sm-*
デスクトップ992px以上1200px未満     ミディアム=md     col-md-*
デスクトップ1200px以上     ラージ=lg     col-lg-*

レイアウト

rowとうかコンテンツは基本的に.containerで囲むようです。

大枠の意味合いでしょうか。

.container-fluid にすると、全画面になるようです。

スマートフォンサイズ(768px未満)の場合は全幅、タブレットサイズ(768～991px)の場合は 750px固定、中型ディスプレイ(992～1199px)の場合は 970px固定、大型ディスプレイ(1200px以上)の場合は 1170px 固定となります。コンテナはセンタリングされます。左右には 15px のパディングが付きます。

とあるので、やっぱり基本的には.containerで囲むのがよさそうです。