こんにちは
かねしろ@pinkrootです。
今日はTwitter BootStrapの学習・実践をしました。
前々から凄く重要なスキルだなぁと思いつつも、中々手を出せずにいたので、まとまった時間が確保できた本日、勢いそのままにひと通りやってみたという感じです。
具体的には公式のリファレンスを読みながら、必要そうな機能を実際に実装して試す、というアクションを取り続けたのち、前々から考えていたサービスの一つを試しに実装してみるという流れで学習を行いました。
公式のリファレンスは以下4ページがメイン。
公式以外で参考にしたのは以下。
実装したシステムは裏側の部分(flaskで実装)がまだ完成していないので、後日公開、ということで。
代わりといってはなんですが、私がBootStrapの学習中に書いたメモ(走り書き)を以下に共有します。
あくまで個人用途なので記述が雑＆リファレンス読んだほうが早いと思ったものはリンクに留めてる、という形ではありますが、参考になる方がいれば幸いです。
BootStrapメモ
サムネイル状に表示する
|
1 2 3 4 5 6 7 8 9 |
<ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> </a> </li> ... </ul> |
グリッドレイアウト
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <div class="span4">span4</div> <div class="span8"> spna8 <div class="row"> <div class="span6">span6</div> <div class="span2">span2</div> </div> </div> </div> |
数値の合計が12になるようにするらしい
公式リファレンスに、たまに合計9にしかならない記述があるけど、あれはなんだろう？
|
1 2 |
offset2 |
とかでその分ずらすこともできる。
背景色とかの指定
普通にCSS書いちゃえばOK
センタリング
コンテンツ全体を
|
1 2 |
div class="container" |
で囲むとできる。
要所要所をセンタリングしたい場合は従来通りCSS書いたほうがいいみたい。
もしくはspanでうまくずらして表示するとか。
fluid layout
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div> |
Responsive Designについて
文字装飾
|
1 2 |
class="lead" |
でリード文として少し大きくなる
|
1 2 |
<small> |
で囲むとで小さくなる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
グレーの文字 <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> 黄色 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> 赤 <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> 青 <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> 緑 <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> |
普段使ってるhtmlについて
|
1 2 3 4 5 |
<blockquote> <ul>, <ol>, <li> <dl>, <dt>, <dd> とか普通に使えるよ |
また、
|
1 2 3 4 5 6 7 |
<dl class="dl-horizontal"> <dt>タイトル1</dt> <dd>本文1</dd> <dt>タイトル2</dt> <dd>本文2</dd> </dl> |
で横書きの説明文リストみたいな奴がつくれる
tableについて
|
1 2 |
<table class="table">で普通よりかっこいいテーブル |
それにclassを追加していくことでデザインを変えられる。
|
1 2 3 4 5 |
<table class="table table-striped"> <table class="table table-bordered"> <table class="table table-hover"> <table class="table table-condensed"> |
また、
|
1 2 |
<tr> |
に様々なクラスをつけることで色を付けられる
|
1 2 3 4 5 |
.success Indicates a successful or positive action. .error Indicates a dangerous or potentially negative action. .warning Indicates a warning that might need attention. .info Used as an alternative to the default styles. |
Formについて
Buttons
|
1 2 |
<button> |
タグにclassをつけることで色々と実現できる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.btn .btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-inverse .btn-link .btn-large .btn-small .btn-mini .btn-block |
Disabledについて
classに
|
1 2 |
disabled |
ってつけると、押せないボタンとかリンクが作れる。
フォームに未入力部があるときとかこれ使えるかも・・・？
img
|
1 2 3 4 |
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> |
icon
Button Groups
ボタンのグループ化とかトグルなボタンとか。
Tab
|
1 2 3 4 5 |
.nav をつけたうえで .nav-tabs .nav-pills |
をulにつける
|
1 2 |
.dropdown-toggle |
との組み合わせも出来る
縦表示
普通の縦表示
|
1 2 |
.nav nav−list |
かっこいい縦表示
|
1 2 |
.tabbable bats-left |
Navigation
.containerの中に書く必要あり
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> |
区切り線を付けたい場合は
|
1 2 3 |
<li>に .divider-vertical |
とつける
|
1 2 |
.navbar-search pull-left |
ってのもある。
|
1 2 |
.navbar-fixed-top |
でトップに表示される。
paddingとか入れてほしくない場合は
|
1 2 |
.navbar-static-top |
色を黒ベースにしたい場合は
|
1 2 |
.navbar-inverse |
Breadcrumbs
|
1 2 3 4 5 6 |
<ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul> |
でパンくずリストの様な表示ができる
ページのコントロール(次のページ、とか)
Typographic
Alerts
単体
|
1 2 3 4 5 |
<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> |
ブロック
|
1 2 3 4 5 6 |
<div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> Best check yo self, you're not... </div> |
種類
|
1 2 3 4 |
.alert alert-info .alert alert-error .alert alert-success |
Progress Bars
以上です。
