Skip to content

Instantly share code, notes, and snippets.

@higuma

higuma/file0.html

Last active August 29, 2015 14:02
Show Gist options
  • Save higuma/6333f898145cb0b2ede0 to your computer and use it in GitHub Desktop.
Save higuma/6333f898145cb0b2ede0 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 学習ノート ref: http://qiita.com/higuma/items/e6c51c8dd21760771439
Raw
file0.html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Raw
file1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and
media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<p>ここが本文(contents)</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Raw
file10.txt
$ grep -rl list-group-item docs/_includes # 例
Raw
file100.txt
- var sizes = ['lg', null, 'sm', 'xs']
- var faces = ['Large', 'Medium', 'Small', 'Extra small']
- for (var i = 0; i < sizes.length; ++i)
div.btn-group
- var klass = 'btn btn-default dropdown-toggle'
- if (sizes[i]) klass += ' btn-' + sizes[i]
button(class=klass, type='button', data-toggle='dropdown')
= faces[i] + ' '
span.caret
ul.dropdown-menu
li: a(href='#') Action
li: a(href='#') Another Action
li: a(href='#') Something else here
li.divider
li: a(href='#') Separated link
Raw
file101.txt
- var settings = [{type:'default', face:'Dropup', pull:'left' }, {type:'primary', face:'Right dropup', pull:'right'}]
- for (var i = 0; i < settings.length; ++i)
div.btn-group.dropup
- var klass = 'dropdown-toggle btn btn-' + settings[i].type
button(class=klass, type='button', data-toggle='dropdown')
= settings[i].face + ' '
span.caret
ul(class = 'dropdown-menu pull-' + settings[i].pull)
li: a(href='#') Action
li: a(href='#') Another Action
li: a(href='#') Something else here
li.divider
li: a(href='#') Separated link
Raw
file102.txt
// 手前に配置
div.input-group
span.input-group-addon @
input.form-control(type="text", placeholder="Username")
br
// 末尾に配置
div.input-group
input.form-control(type="text")
span.input-group-addon .00
br
// 前後両方に配置
div.input-group
span.input-group-addon $
input.form-control(type="text")
span.input-group-addon .00
Raw
file103.txt
- var sizes = ['lg', null, 'sm']
- for (var i = 0; i < sizes.length; ++i)
- var klass = 'input-group'
- if (sizes[i]) klass += ' input-group-' + sizes[i]
div(class=klass)
span.input-group-addon @
input.form-control(type="text", placeholder="Username")
br
Raw
file104.txt
- var types = ['checkbox', 'radio', 'radio', 'radio']
- for (var i = 0; i < types.length; ++i)
div.row
div.col-lg-6
div.input-group
span.input-group-addon
input(type=types[i], name= types[i] == 'radio' ? 'radio1' : "", checked = i == 2)
input.form-control(type="text")
- if (types[i] == 'checkbox')
br
Raw
file105.txt
div.row
div.col-lg-6
div.input-group
// div.input-group-btn でも同じ(exampleはdivにしている)
span.input-group-btn
button.btn.btn-default(type="button") Go!
input.form-control(type="text")
div.col-lg-6
div.input-group
input.form-control(type="text")
span.input-group-btn
button.btn.btn-default(type="button") Go!
Raw
file106.txt
// これはさすがに大変なので片方だけ
div.input-group
span.input-group-btn
button.btn.btn-default.dropdown-toggle(type="button", data-toggle="dropdown")
| Action
span.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
input.form-control(type="text")
Raw
file107.txt
// これも片方だけ
form(role='form')
div.input-group
div.input-group-btn
button.btn.btn-default(type='button') Action
button.btn.btn-default.dropdown-toggle(type="button", data-toggle="dropdown")
span.caret
ul.dropdown-menu
li: a(href="#") action
li: a(href="#") another action
li: a(href="#") something else here
li.divider
li: a(href="#") separated link
input.form-control(type="text")
Raw
file108.txt
// tabsの例
ul.nav.nav-tabs
li.active: a(href='#') Home
li: a(href='#') Profile
li: a(href='#') Messages
// 縦配置pillsの例
div.row
// これくらいの幅が適当か?
div.col-sm-4
ul.nav.nav-pills.nav-stacked
li: a(href='#') Home
li.active: a(href='#') Profile
li: a(href='#') Messages
// justifiedの例(disabled付き)
ul.nav.nav-tabs.nav-justified
li.active: a(href='#') Home
li: a(href='#') Profile
li: a(href='#') Messages
li.disabled: a(href='#') Disabled link
Raw
file109.txt
// tabs/pillsとも同じなので片方だけ
ul.nav.nav-tabs
li.active: a(href='#') Home
li: a(href='#') Help
li.dropdown
// 次の一行はこの場合の必須パターン(全て必要)
a.dropdown-toggle(href='#', data-toggle='dropdown')
| Dropdown
span.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
Raw
file11.html
<!DOCTYPE HTML>
Raw
file11.txt
div.container
div.row
- for (var i = 0; i < 12; ++i)
div.col-md-1 .col-md-1
div.row
div.col-md-8 .col-md-8
div.col-md-4 .col-md-4
Raw
file110.txt
// jadeでもこんなに長いとちょっと大変だが...ここは手抜きしてはいけない
nav.nav.navbar-default
div.container-fluid
div.navbar-header
button.navbar-toggle(type="button", data-toggle="collapse", data-target="#bs-example-navbar-collapse-1")
span.sr-only Toggle navigation
- for (var i = 0; i < 3; ++i)
span.icon-bar
a.navbar-brand(href="#") Brand
div.collapse.navbar-collapse#bs-example-navbar-collapse-1
ul.nav.navbar-nav
li.active: a(href="#") Link
li: a(href="#") Link
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown")
| Dropdown
b.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
li.divider
li: a(href="#") One more separated link
form.navbar-form.navbar-left(role="search")
div.form-group
input.form-control(type="text", placeholder="Search")
button.btn.btn-default(type="submit") Submit
ul.nav.navbar-nav.navbar-right
li: a(href="#") Link
li.dropdown
a.dropdown-toggle(href='#', data-toggle='dropdown')
| Dropdown
b.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
Raw
file111.txt
style(type='text/css').
body { padding-top: 60px; } // 本文は70だがこれくらいがちょうどいい
// 下端の場合はpadding-bottom
Raw
file112.txt
ol.breadcrumb
li: a(href="#") Home
li: a(href="#") Library
li.active Data
Raw
file113.txt
Home / Library / Data
^ ^ ^
| | |
homeへの Libraryへの 現在位置
link link (linkなし)
Raw
file114.txt
ul.pagination
li.disabled: a(href='#') &laquo;
li.active: a(href='#') 1
li: a(href='#') 2
li: a(href='#') 3
li: a(href='#') 4
li: a(href='#') 5
li: a(href='#') &raquo;
Raw
file115.txt
- var sizes = [' pagination-lg', '', ' pagination-sm']
- for (var sz = 0; sz < sizes.length; ++sz)
div
ul(class = 'pagination' + sizes[sz])
li: a(href='#') &laquo;
- for (var i = 1; i <= 5; ++i)
li: a(href='#')= "" + i
li: a(href='#') &raquo;
Raw
file116.txt
ul.pager
// 左端に配置
li.previous.disabled: a(href='#') &larr; first
// 次の2つは中央に配置
li.disabled: a(href='#') previous
li: a(href='#') next
// 右端に配置
li.next: a(href='#') last
Raw
file117.txt
- var opt = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']
- for (var i = 0; i < opt.length; ++i)
span(class = 'label label-' + opt[i].toLowerCase())= opt[i]
= ' '
Raw
file118.txt
p
| inbox
span.badge 42
Raw
file119.txt
button.btn.btn-primary
| Home
span.badge 42
Raw
file12.txt
div.container
div.row
- for (var i = 0; i < 6; ++i)
div(class="col-xs-6 col-md-4") .col-xs-6 .col-md-4
Raw
file120.txt
// container幅に角丸で表示
div.container
div.jumbotron
h1 Hello, world!
p This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
p: a.btn.btn-primary.btn-lg(href='#') Learn more
// 横幅一杯に表示(divの入れ子を反転すればよい)
div.jumbotron
div.container
// 以下同じ(略)
Raw
file121.txt
// 普通のh1より上部の空白を広く取る
div.page-header
h1 Example page header
small Subtext for header
Raw
file122.txt
// 134x180 empty image
- var imgUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzQiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTM0IiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjY3IiB5PSI5MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjEzNHgxODA8L3RleHQ+PC9zdmc+'
div.container
div.row
- for (var i = 0; i < 12; ++i)
div.col-xs-6.col-md-3
img.thumbnail(src = imgUrl)
Raw
file123.txt
// 300x200 empty image
- var imgUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjE1MCIgeT0iMTAwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjE5cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MzAweDIwMDwvdGV4dD48L3N2Zz4='
div.container
div.row
- for (var i = 0; i < 12; ++i)
div.col-sm-6.col-md-4
div.thumbnail
img(src = imgUrl)
h3 Thumbnail label
p Cras justo odio, dapibus ac facilisis ...
a.btn.btn-primary(href='#') Button
|
a.btn.btn-default(href='#') Button
Raw
file124.txt
div.alert.alert-danger
button.close(type='button', data-dismiss='alert', aria-hidden) &times;
strong Caution
| Please check
a.alert-link(href='#') your account.
Raw
file125.txt
// 日本専用サイト用
div.alert.alert-danger
strong 注意:
| アカウント設定に問題があります。
a.alert-link(href='#') 確認して下さい。
button.btn.btn-danger.btn-xs.pull-right(type='button', data-dismiss='alert') 閉じる
Raw
file126.txt
div.progress
div.progress-bar(aria-valuenow="60", aria-valuemin="0", aria-valuemax="100", style="width: 60%;")
| 60%
span.sr-only 60% Complete
Raw
file127.txt
// 基本
div.progress
div.progress-bar(style="width: 60%;") 60%
// 斜線 + アニメーション
div.progress.progress-striped.active
div.progress-bar(style="width: 40%;") 40%
// stack + 色分け
div.progress
div.progress-bar.progress-bar-success(style="width: 30%;") 30%
div.progress-bar.progress-bar-info(style="width: 25%;") 25%
div.progress-bar.progress-bar-warning(style="width: 20%;") 20%
div.progress-bar.progress-bar-danger(style="width: 15%;") 15%
div.progress
div.progress-bar(style="width: 60%;") 60%
Raw
file128.txt
// 64x64 empty image
- var mediaObjUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIj48L3JlY3Q+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+'
// 基本
div.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
// 基本 + nest
div.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
// 以下nest
div.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
Raw
file129.txt
// 64x64 empty image
- var mediaObjUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIj48L3JlY3Q+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+'
ul.media-list
li.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
// nest
ul.media-list
li.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
// nest
ul.media-list
li.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
ul.media-list
li.media
a.pull-left(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
li.media
// pull-rightの例
a.pull-right(href='#')
img.media-object(src = mediaObjUrl)
div.media-body
h4.media-heading Media-heading
| Cras sit amet nibh libero, in gravida nulla...
Raw
file13.txt
+------------ div.wrapper -----------+
|+-------------------++-------------+|
|| || ||
|| div.content || div.menu ||
|| (float:left) || (non-float) ||
|| |+-------------+|
+|-------------------|---------------+
| |
+-------------------+
Raw
file130.txt
// 初戦負けちゃった...
ul.list-group
li.list-group-item.list-group-item-success Kawashima
span.badge 1
li.list-group-item.list-group-item-info Honda
span.badge 4
li.list-group-item.list-group-item-warning Kagawa
span.badge 10
li.list-group-item.list-group-item-danger Nagatomo
span.badge 5
Raw
file131.txt
div.list-group
a.list-group-item.active(href='#')
h4.list-group-item-heading Kawashima
p.list-group-item-text GK
a.list-group-item(href='#')
h4.list-group-item-heading Honda
p.list-group-item-text FW
a.list-group-item(href='#')
h4.list-group-item-heading Kagawa
p.list-group-item-text FW
a.list-group-item(href='#')
h4.list-group-item-heading Nagatomo
p.list-group-item-text DF
Raw
file132.txt
// 単純な例
div.panel.panel-default
div.panel-body Basic panel example
// heading付き
div.panel.panel-default
div.panel-heading Panel heading
div.panel-body Panel content
// heading付き(やや文字を大きく)
div.panel.panel-default
div.panel-heading
h2.panel-title Panel heading
div.panel-body Panel content
// footer付き
div.panel.panel-default
div.panel-body Panel content
div.panel-footer Panel footer
// 各種contextual colors
- var context = ['primary', 'success', 'info', 'warning', 'danger']
- for (var i = 0; i < context.length; ++i)
div(class = 'panel panel-' + context[i])
div.panel-heading Panel title
div.panel-body Panel content
// tableの例(次がんばろう!)
div.panel.panel-default
div.panel-heading 2014 FIFA World Cup Brazil
div.panel-body 日本代表
table.table
tbody
tr
th 位置
th 背番号
th 選手名
tr
td 監督
td -
td アルベルト ザッケローニ
tr
td GK
td 1
td 川島 永嗣
tr
td DF
td 2
td 内田 篤人
tr
td MF
td 17
td 長谷部 誠
tr
td FW
td 13
td 大久保 嘉人
// listの例
div.panel.panel-default
div.panel-heading グループC
ul.list-group
li.list-group-item コロンビア
li.list-group-item コートジボワール
li.list-group-item 日本
li.list-group-item ギリシャ
Raw
file133.txt
div.well 通常のwell
div.well.well-lg 枠が広いwell
div.well.well-sm 枠が狭いwell
Raw
file134.txt
// jQueryとBootstrapのロード後
$(document).off('.data-api')
Raw
file135.txt
$(document).off('.alert.data-api'); // alertだけ無効化
Raw
file136.txt
// 先に何か別のbuttonプラグインをロードし、
// その後でBootstrapのbuttonプラグインをロードしたとする
var bootstrapButton = $.fn.button.noConflict() // $.fnは$.prototypeと同じ
// これで先にロードしたbuttonプラグインが復活し、
// 戻り値としてBootstrapのbuttonプラグインが返る
// Buttostrapのbuttonプラグインを別の衝突しない名前で再登録
$.fn.bootstrapBtn = bootstrapButton
// 以下 $(...).bootstrapBtn(...) とコールすればよい
Raw
file137.txt
// .modal.fadeを付けると表示してくれないので外す
div
div.modal-dialog
div.modal-content
div.modal-header
button.close(type="button", data-dismiss="modal") &times;
h4.modal-title Modal title
div.modal-body
p One fine body&hellip;
div.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
button.btn.btn-primary(type="button") Save changes
Raw
file138.txt
button.btn.btn-primary.btn-lg(data-toggle="modal", data-target="#myModal")
| Launch demo modal
div.modal.fade#myModal(aria-hidden="true")
div.modal-dialog
div.modal-content
div.modal-header
button.close(type="button", data-dismiss="modal") &times;
h4.modal-title Modal title
div.modal-body Modal body
div.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
button.btn.btn-primary(type="button") Save changes
Raw
file139.txt
- var sizes = ['lg', 'md', 'sm']
- for (var i = 0; i < sizes.length; ++i)
button.btn.btn-primary(data-toggle="modal", data-target="#myModal-" + sizes[i])
= 'Launch ' + sizes[i]
= ' '
- for (var i = 0; i < sizes.length; ++i)
div.modal.fade(id = 'myModal-' + sizes[i])
// .modal-mdは意味なし(デフォルトサイズにしたいだけなのでOK)
div(class = 'modal-dialog modal-' + sizes[i])
div.modal-content
div.modal-header
button.close(type="button", data-dismiss="modal") &times;
h4.modal-title Modal title
div.modal-body Modal body
div.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
button.btn.btn-primary(type="button") Save changes
Raw
file14.txt
+------------ div.wrapper -----------+
|+-------------------++-------------+|
|| || ||
|| div.content || div.menu ||
|| (float:left) || (non-float) ||
|| |+-------------+|
|| | |
|| | |
|+-------------------+ |
|+----------------------------------+|
|| div.clear (clear:both) ||
|+----------------------------------+|
+------------------------------------+
Raw
file140.txt
// デフォルト
$('#myModal').modal();
// 強制的にclose
$('#myModal').modal('hide');
// backdropなし(背景が暗くならず、周囲をクリックしてもcloseしない)
$('#myModal').modal({backdrop: false});
Raw
file141.txt
// backdrop背景なし(data-backdrop=''でもよい)
button.btn.btn-primary.btn-lg(data-toggle="modal", data-target="#myModal" data-backdrop='false')
| Launch demo modal
Raw
file142.txt
$('#myModal-md').on('hide.bs.modal', function (e) {
// close(CSS transision)開始
console.log('modal is closing');
}).on('hidden.bs.modal', function (e) {
// close終了(0.3s後)
console.log('modal closed');
})
Raw
file143.txt
nav.navbar.navbar-default
div.container-fluid
div.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='#navbar-collapse-1')
span.sr-only Toggle navigation
- for (var i = 0; i < 3; ++i)
span.icon-bar
a.navbar-brand(href="#") Project name
div.collaps.navbar-collapse#navbar-collapse-1
ul.nav.navbar-nav
- var dropdowns = ['Dropdown', 'Dropdown 2']
- for (var i = 0; i < dropdowns.length; ++i)
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown")
= dropdowns[i] + ' '
b.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
li.divider
li: a(href="#") One more separated link
// .navbar-rightはこのレベルでないと機能しない(ここで苦労した)
// (もう一段内側のli.dropdownに付けられれば上のループと一緒にできるのに)
ul.nav.navbar-nav.navbar-right
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown") Dropdown 3
b.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
li.divider
li: a(href="#") One more separated link
Raw
file144.txt
ul.nav.nav-pills
li.active: a(href='#') Regular link
- var dropdowns = ['Dropdown', 'Dropdown 2', 'Dropdown 3']
- for (var i = 0; i < dropdowns.length; ++i)
li.dropdown(id = 'dropdown-' + i)
a.dropdown-toggle(href='#', data-toggle='dropdown')
= dropdowns[i] + ' '
span.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
Raw
file145.txt
(通常は)div.dropdown (囲み用要素)
(aまたはbutton)(data-toggle='dropdown')
ul.dropdown-menu
li
a(href='...') ...
li ...
a(href='...') ...
...
Raw
file146.txt
script
:coffee
$('#dropdown-1').on 'show.bs.dropdown', -> console.log 'show'
$('#dropdown-1').on 'hide.bs.dropdown', -> console.log 'hide'
Raw
file147.txt
// やや不完全(動くが要オフセット調整:本来bodyを想定したものなので仕方ない)
div.container
// navにIDを設定するのがまず第一のポイント
nav.nav.navbar-default.navbar-static#navbar-chapters
div
ul.nav.navbar-nav
- for (var chap = 1; chap <= 5; ++chap)
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#' + chap)
= "Chapter " + chap + ' '
b.caret
ul.dropdown-menu
- for (var sect = 1; sect <= 5; ++sect)
li
a(href='#' + chap + '-' + sect)
= "Section " + chap + '-' + sect
// こちらが「監視対象」: 本来は(本文通り)bodyに設定すべきところ
// 必須属性はdata-spy="scroll"とdata-target="navのID"の2つ
// また(bodyでなく)中途半端な場所から始まるためdata-offsetを調整している
// (data-offset="上端からのpixel距離" - 適宜調整すること)
div.container(data-spy="scroll", data-target='#navbar-chapters', data-offset="120", style='height: 200px; overflow: auto;')
- for (var chap = 1; chap <= 5; ++chap)
h2(id = '' + chap)= "Chapter " + chap
- for (var sect = 1; sect <= 5; ++sect)
h3(id = '' + chap + '-' + sect)= 'Section ' + chap + '-' + sect
Raw
file148.txt
div.panel.panel-default
div.panel-body
ul.nav.nav-tabs
li.active
a(href='#home', data-toggle='tab') Home
li
a(href='#profile', data-toggle='tab') Profile
li
a(href='#contact', data-toggle='tab') Contact
div.tab-content
div.tab-pane.active#home
div.panel-body Home
div.tab-pane#profile
div.panel-body Profile
div.tab-pane#contact
div.panel-body Contact
Raw
file149.txt
div.tab-content
div.tab-pane.active.fade.in#home
div.panel-body Home
div.tab-pane.fade#profile
div.panel-body Profile
div.tab-pane.fade#contact
div.panel-body Contact
Raw
file15.css
.clearfix:after {
content: "."; /* 新しい要素を作る(""だと認識しないブラウザがある) */
display: block; /* ブロックレベル要素に */
clear: both; /* ここが核心部 */
height: 0; /* ここと次で表示を抑制するが...昔は... */
visibility: hidden; /* ブラウザ仕様(バグ?)の対応が大変だった... */
}
Raw
file15.txt
+------------ div.wrapper -----------+
|+-------------------++-------------+|
|| || ||
|| div.content || div.menu ||
|| (float:left) || (non-float) ||
|| |+-------------+|
|| | |
|| | |
|+-------------------+ |
|+----------------------------------+|
|| div.clear (clear:both) ||
|+----------------------------------+|
+------------------------------------+
Raw
file150.txt
a(href='#', title='TOOLTIP!') tooltip
Raw
file151.txt
script
$('a').tooltip(); // 例: 全てのa要素に対して有効化
Raw
file152.txt
// 右側に表示、500msのdelayを追加
a(href='#', title='TOOLTIP!', data-placement='right', data-delay='500') tooltip
// htmlを有効にして赤の強調文字で表示
a(href='#', title="<span style='color:red;'><b>TOOLTIP!</b></span>", data-html='true') tooltip
Raw
file153.txt
$('#example').popover(/*options*/)
Raw
file154.txt
button.btn.btn-default#example(type='button', title='Popover', data-content='This is a popover message.') Click me
Raw
file155.txt
div.alert.alert-info.fade.in
button.close(type='button', data-dismiss='alert') &times;
strong Info:
| Dismissable alert example.
Raw
file156.txt
div.alert.alert-{種類}[.fade.in]
button.close(type='button', data-dismiss='alert') &times;
strong {ヘッダ}
| {本文}
Raw
file157.txt
button.btn.btn-primary#btn-load(type='button', data-loading-text='Loading...') Load
Raw
file158.coffee
# 場所に注意: jQueryとbootstrap.jsの後でないと動作しない
# (おっとここだけCoffeeScriptで書いてしまった)
$('#btn-load').click ->
btn = $ @
btn.button 'loading'
# 本当は$.ajaxだがテスト用にtimerを使う(2s後に復帰)
setTimeout((-> btn.button 'reset'), 2000)
Raw
file158.txt
button.btn.btn-primary#btn-load(type='button', data-loading-text='Loading...') Load
Raw
file159.coffee
# 場所に注意: jQueryとbootstrap.jsの後でないと動作しない
# (おっとここだけCoffeeScriptで書いてしまった)
$('#btn-load').click ->
btn = $ @
btn.button 'loading'
# 本当は$.ajaxだがテスト用にtimerを使う(2s後に復帰)
setTimeout((-> btn.button 'reset'), 2000)
Raw
file159.txt
// 全体的にボタン色が分かりにくいのでbtn-defaultに変更
// 単独トグル(ただし動作に問題あり、後で補足する)
button.btn.btn-default(type='button', data-toggle='button') Toggle
// チェックボックスグループ
div.btn-group(data-toggle='buttons')
- for (var i = 1; i <= 3; ++i)
label.btn.btn-default
input(type='checkbox')
= 'Option ' + i
// ラジオ動作
div.btn-group(data-toggle='buttons')
- for (var i = 1; i <= 3; ++i)
label.btn.btn-default
input(type='radio', name='radio-example')
= 'Option ' + i
Raw
file16.css
.clearfix:after {
content: "."; /* 新しい要素を作る(""だと認識しないブラウザがある) */
display: block; /* ブロックレベル要素に */
clear: both; /* ここが核心部 */
height: 0; /* ここと次で表示を抑制するが...昔は... */
visibility: hidden; /* ブラウザ仕様(バグ?)の対応が大変だった... */
}
Raw
file16.txt
+------- div.wrapper.clearfix -------+
|+-------------------++-------------+|
|| || ||
|| div.content || div.menu ||
|| (float:left) || (non-float) ||
|| |+-------------+|
|| | |
|| | |
|+-------------------+ |
+------------------------------------+ <== :afterはここに適用
Raw
file160.txt
// 背景色の比較用
- var colors = ['default', 'primary', 'success', 'info', 'warning', 'danger', 'link']
// checkboxの場合
- for (var c = 0; c < colors.length; ++c)
div.btn-group(data-toggle='buttons')
- for (var i = 1; i <= 3; ++i)
label(class = 'btn btn-' + colors[c])
input(type='checkbox')
= '' + i
br
// radioの場合
- for (var c = 0; c < colors.length; ++c)
div.btn-group(data-toggle='buttons')
- for (var i = 1; i <= 3; ++i)
label(class = 'btn btn-' + colors[c])
input(type='radio', name='radio-example-' + colors[c])
= '' + i
Raw
file161.txt
// 単独トグルの改善策
div.btn-group(data-toggle='buttons')
label.btn.btn-default
input(type='checkbox')
| Toggle
Raw
file162.txt
div.panel-group#accordion
- for (var i = 1; i <= 3; ++i)
div.panel.panel-default
div.panel-heading
h4.panel-title
a(data-toggle="collapse", data-parent="#accordion", href="#collapse-" + i)
= 'Collapsible Group Item #' + i
- var klass = 'panel-collapse collapse'
- if (i == 1) klass += ' in'
div(class = klass, id = 'collapse-' + i)
div.panel-body
= 'Collapsible Group Item contents #' + i
Raw
file163.txt
div.panel.panel-info
div.panel-heading
h4.panel-title
a(href='#', data-toggle="collapse", data-target="#collapse-1")
| Collapsible Item #1
div.panel-collapse.collapse.in#collapse-1
div.panel-body Collapsible Item contents #1
Raw
file164.txt
// a(href='#', data-toggle="collapse", data-target="#collapse-1")を変更
span(data-toggle="collapse", data-target="#collapse-1", style='cursor:pointer;')
Raw
file165.txt
button.btn.btn-danger(type="button", data-toggle="collapse", data-target="#demo") simple collapsible
div.well.collapse.in#demo Collapsive well.
Raw
file166.txt
// 画像データ
- var slide1 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+'
- var slide2 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg=='
- var slide3 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+'
- var slides = [slide1, slide2, slide3]
// ここにIDが必要(複数のcarouselsが同時に動作する場合を考えて...)
div.carousel.slide#carousel-example-generic(data-ride="carousel")
// indicator(中央下部の丸)
ol.carousel-indicators
- for (var i = 0; i < 3; ++i)
li(data-target="#carousel-example-generic", data-slide-to="" + i, class= (i == 0) ? "active" : "")
// スライドイメージとキャプション
div.carousel-inner
- for (var i = 0; i < 3; ++i)
div(class = 'item' + ((i == 0) ? ' active' : ''))
// 画像
img(src=slides[i])
// キャプション(タイトルと説明)
div.carousel-caption
h4= "Slide " + (i + 1)
p= "Slide number-" + (i + 1)
// 左矢印
a.left.carousel-control(href="#carousel-example-generic", data-slide="prev")
span.glyphicon.glyphicon-chevron-left
// 右矢印
a.right.carousel-control(href="#carousel-example-generic", data-slide="next")
span.glyphicon.glyphicon-chevron-right
Raw
file167.txt
// 画像データ
- var slide1 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+'
- var slide2 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg=='
- var slide3 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+'
- var slides = [slide1, slide2, slide3]
// ここにIDが必要(複数のcarouselsが同時に動作する場合を考えて...)
div.carousel.slide#carousel-example-generic(data-ride="carousel")
// indicator(中央下部の丸)
ol.carousel-indicators
- for (var i = 0; i < 3; ++i)
li(data-target="#carousel-example-generic", data-slide-to="" + i, class= (i == 0) ? "active" : "")
// スライドイメージとキャプション
div.carousel-inner
- for (var i = 0; i < 3; ++i)
div(class = 'item' + ((i == 0) ? ' active' : ''))
// 画像
img(src=slides[i])
// キャプション(タイトルと説明)
div.carousel-caption
h4= "Slide " + (i + 1)
p= "Slide number-" + (i + 1)
// 左矢印
a.left.carousel-control(href="#carousel-example-generic", data-slide="prev")
span.glyphicon.glyphicon-chevron-left
// 右矢印
a.right.carousel-control(href="#carousel-example-generic", data-slide="next")
span.glyphicon.glyphicon-chevron-right
Raw
file17.txt
div.container
div.row
div.col-xs-6.col-sm-3 .xs-6.sm-3
div.col-xs-6.col-sm-3 .xs-6.sm-3
div.col-xs-6.col-sm-3 .xs-6.sm-3
div.clearfix.visible-xs
div.col-xs-6.col-sm-3 .xs-6.sm-3
Raw
file18.txt
.xs-6.sm-3 .xs-6.sm-3 .xs-6.sm-3 .xs-6.sm-3
Raw
file19.txt
.xs-6.sm-3 .xs-6.sm-3 <= xs-6なのでまずここで改行
.xs-6.sm-3 <= ここでclearfix
.xs-6.sm-3
Raw
file2.html
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Raw
file20.txt
div.container
div.row
div.col-sm-5.col-md-6 .col-sm-5.col-md-6
div.col-sm-5.col-sm-offset-2.col-md-6.col-md-offset-0
| .col-sm-5.col-sm-offset-2.col-md-6.col-md-offset-0
Raw
file21.txt
+----------------------------------+----------------------------------+
|.col-sm-5.col-md-6 |.col-sm-5.col-sm-offset-2.col-md- |
| |6.col-md-offset-0 |
+----------------------------------+----------------------------------+
^
|
ここが中央(6:6で等分)
Raw
file22.txt
(5) (2) (5)
+--------------------------+ +--------------------------+
|.col-sm-5.col-md-6 | |.col-sm-5.col-sm-offset- |
+--------------------------+ |2.col-md-6.col-md-offset- |
|0 |
+--------------------------+
Raw
file23.txt
div.container
div.row
div.col-sm-6.col-md-5.col-lg-6 .col-sm-6.col-md-5.col-lg-6
// ここに注意(必要)
// vvvvvvvvvvvvvvvv
div.col-sm-6.col-md-5.col-md-offset-2.col-lg-6.col-lg-offset-0
| .col-sm-6.col-md-5.col-md-offset-2.col-lg-6.col-lg-offset-0
Raw
file24.txt
smの場合
+--------------+------------+
| (6) | (6) |
+--------------+------------+
mdの場合
+-------------+ +-------------+
| (5) | (2) | (5) |
+-------------+ +-------------+
lgの場合
+----------------------+----------------------+
| (6) | (6) |
+----------------------+----------------------+
Raw
file25.txt
div.container
div.row
div.col-md-4 .md-4
div.col-md-4.col-md-offset-4 .md-4.md-offset-4
div.row
div.col-md-3.col-md-offset-3 .md-3.md-offset-3
div.col-md-3.col-md-offset-3 .md-3.md-offset-3
div.row
div.col-md-6.col-md-offset-3 .md-6.md-offset-3
Raw
file26.txt
+---+---+---+---+ +---+---+---+---+
| 4 | 4 | 4 |
+---+---+---+---+ +---+---+---+---+
+---+---+---+ +---+---+---+
3 | 3 | 3 | 3 |
+---+---+---+ +---+---+---+
+---+---+---+---+---+---+
3 | 6 | 3
+---+---+---+---+---+---+
Raw
file27.txt
div.container
div.row
div.col-md-9 Level 1: .col-md-9
div.row
div.col-md-6 Level 2: .col-md-6
div.col-md-6 Level 2: .col-md-6
div.col-md-3 Level 1: .col-md-3
Raw
file28.txt
+---------------------------------------------+-----------------+
|Level 1: .col-md-9 |Level1: .col-md-3|
|+---------------------+---------------------+| |
||Level 2: .col-md-6 |Level 2: .col-md-6 || |
|+---------------------+---------------------+| |
| | |
+---------------------------------------------+-----------------+
Raw
file29.txt
div.container
div.row
div.col-md-3.col-md-push-7 .3.push-7
div.col-md-3.col-md-pull-1 .3.pull-1
Raw
file3.txt
<!--[if lt IE 9]>
script(src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js")
script(src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js")
<![endif]-->
Raw
file30.txt
+---+---+---+ +---+---+---+
(2) |.3.pull-1 | (2) |.3.push-7 | (2)
+---+---+---+ +---+---+---+
+---+---+---+---+---+---+---+---+---+---+---+---+
Raw
file31.txt
blockquote
p Lorem ipsum ...
footer Someone focus in
cite(title='Source Title') Source Title
Raw
file32.txt
| Lorem ipsum ...
|
| - Someone famous in Source Title
Raw
file33.txt
dl
dt 用語
dd 用語説明...
dt 用語
dd 用語説明...
...
Raw
file34.txt
用語
説明...
用語
説明...
Raw
file35.txt
たわば お前はもう死んでいる...............................
........
へれっつ お前ももう死んでいる
Raw
file36.txt
dl.dl-horizontal
dt じゅげむじゅげむごこうのすりきれかいじゃりすいぎょ...
dd 日本一有名な長い名前
Raw
file37.txt
じゅげむじゅげむごこう... 日本一有名な長い名前
Raw
file38.txt
div.container
table.table
tbody
tr
th #
th First Name
th Last Name
th Username
tr
td 1
td Mark
td Otto
td @mdo
tr
td 2
td Jacob
td Thornton
td @fat
tr
td 3
td(colspan='2') Larry the Bird
td @twitter
Raw
file39.txt
div.table-responsive
table.table
// tbody以下(略)
Raw
file4.txt
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
// (その後application.js等)
Raw
file40.txt
div.checkbox
label
// 当然これでよさそうに見えるが...
input(type="checkbox") Check me out
Raw
file41.txt
// エラー (<br>foo</br> となってしまうので)
br foo
Raw
file42.txt
// 方法1 (これが自然)
label
input(type="checkbox")
| Check me out
// 方法2(labelとinputの順序は逆でも結果は同じ)
label(for='id-checkbox') Check me out
input#id-checkbox(type="checkbox")
Raw
file43.txt
form(role="form")
div.form-group
label(for="inputEmail1") Email address
input.form-control#inputEmail1(type="email", placeholder="Enter email")
div.form-group
label(for="inputPassword1") Password
input.form-control#inputPassword1(type="password", placeholder="Password")
div.form-group
label(for="inputFile") File input
input#inputFile(type="file")
p.help-block Example block-level help text here.
div.checkbox
label
input(type="checkbox")
| Check me out
button.btn.btn-default(type="submit") Submit
Raw
file44.txt
form.form-inline(role="form")
div.form-group
label.sr-only(for="inputEmail2") Email address
input.form-control#inputEmail2(type="email", placeholder="Enter email")
div.form-group
label.sr-only(for="inputPassword2") Password
input.form-control#inputPassword2(type="password", placeholder="Password")
div.checkbox
input(type="checkbox")
| Remember me
button.btn.btn-default(type="submit") Sign in
Raw
file45.txt
form.form-horizontal(role="form")
div.form-group
label.col-sm-2.control-label(for="inputEmail3") Email
div.col-sm-10
input.form-control#inputEmail3(type="email", placeholder="Email")
div.form-group
label.col-sm-2.control-label(for="inputPassword3") Password
div.col-sm-10
input.form-control#inputPassword3(type="password", placeholder="Password")
div.form-group
div.col-sm-offset-2.col-sm-10
div.checkbox
label
input(type="checkbox")
| Remember me
div.form-group
div.col-sm-offset-2.col-sm-10
button.btn.btn-default(type="submit") Sign in
Raw
file46.txt
+--------- div.form-group -------------------------+
|+---------++-------------------------------------+|
|| Email||(Email) ||
|+---------++-------------------------------------+|
+--------------------------------------------------+
+--------- div.form-group -------------------------+
|+---------++-------------------------------------+|
|| Password||(Password) ||
|+---------++-------------------------------------+|
+--------------------------------------------------+
+--------- div.form-group -------------------------+
| +-- div.col-sm-offset-1.col-sm-10 ----+|
| |+------div.checkbox ----------------+||
| (offset) ||[x] Remember me |||
| |+-----------------------------------+||
| +-------------------------------------+|
+--------------------------------------------------+
+--------- div.form-group -------------------------+
| +----- div ---------------------------+|
| (offset) |<<Sign in>> ||
| +-------------------------------------+|
+--------------------------------------------------+
| |
|<--- 2 --->|<-------------- 10 ------------------>|
Raw
file47.txt
text, password, datetime, datetime-local, date, month, time, week,
number, email, url, search, tel, color
Raw
file48.txt
form(role="form")
div.form-group
input.form-control(type='text', placeholder='Text input')
Raw
file49.txt
div.form-group
textarea.form-control(placeholder='Text input', rows='3')
Raw
file5.txt
style(type='text/css').
.navbar-skyblue { background-color: skyblue; }
Raw
file50.txt
div.checkbox
label
input(type="checkbox", value="")
| Option one is this and that&mdash;be sure to include why it's great
div.radio
label
input.optionsRadios1(type="radio", name="optionsRadios", value="option1", checked)
| Option one is this and that&mdash;be sure to include why it's great
div.radio
label
input.optionsRadios1(type="radio", name="optionsRadios", value="option2")
| Option two can be something else and selecting it will deselect option one
Raw
file51.txt
div.form-group
- for (var i = 1; i <= 3; ++i)
label.checkbox-inline
input(id = "inlineCheckbox" + i, type="checkbox", value="option" + i)
= i
Raw
file52.txt
select.form-control
- for (var i = 1; i <= 5; ++i)
option= "" + i
select.form-control(multiple)
- for (var i = 1; i <= 5; ++i)
option= "" + i
Raw
file53.txt
// 誤り(Bootstrapのlook & feelにならない)
div.form-control
select
- for (var i = 1; i <= 5; ++i)
option= "" + i
Raw
file54.txt
form.form-horizontal(role="form")
div.form-group
label.col-sm-2.control-label Email
div.col-sm-10
p.form-control-static [email protected]
div.form-group
label.col-sm-2.control-label(for="inputPassword") Password
div.col-sm-10
input.form-control#inputPassword(type="password", placeholder="Password")
Raw
file55.txt
div.form-group
input.form-control#disabledInput(type="text", placeholder="Disabled input here...", disabled)
Raw
file56.txt
form(role="form")
fieldset(disabled)
div.form-group
label(for="disabledTextInput") Disabled input
input.form-control#disabledTextInput(type="text", placeholder="Disabled input")
div.form-group
label(for="disabledSelect") Disabled select menu
select.form-control#disabledSelect
option Disabled select
div.checkbox
label
input(type="checkbox")
| Can't check this
button.btn.btn-primary(type="submit") Submit
Raw
file57.txt
form(role="form")
div.form-group.has-success
label.control-label(for="inputSuccess1") Input with success
input.form-control#inputSuccess1(type="text")
div.form-group.has-warning
label.control-label(for="inputWarning1") Input with warning
input.form-control#inputWarning1(type="text")
div.form-group.has-error
label.control-label(for="inputError1") Input with error
input.form-control#inputError1(type="text")
Raw
file58.txt
form(role="form")
div.form-group.has-success.has-feedback
label.control-label(for="inputSuccess2") Input with success
input.form-control#inputSuccess2(type="text")
span.glyphicon.glyphicon-ok.form-control-feedback
div.form-group.has-warning.has-feedback
label.control-label(for="inputWarning2") Input with warning
input.form-control#inputWarning2(type="text")
span.glyphicon.glyphicon-warning-sign.form-control-feedback
div.form-group.has-error.has-feedback
label.control-label(for="inputError2") Input with error
input.form-control#inputError2(type="text")
span.glyphicon.glyphicon-remove.form-control-feedback
Raw
file59.txt
// vvvvvvvvvvvvv
div.form-group.....has-feedback
// labelは必須(ないとアイコンの位置ずれが発生する)
label.control-label(for="inputSuccess2") Input with success
input.form-control#inputSuccess2(type="text")
// vvvvvvvvvvvvvvvvvvvvvv
span.glyphicon.glyphicon-ok.form-control-feedback
Raw
file6.txt
nav.navbar.navbar-default.navbar-skyblue
div.container-fluid
a.navbar-brand(href="#") Title
Raw
file60.txt
form.form-horizontal(role="form")
div.form-group.has-success.has-feedback
label.control-label.col-sm-3(for="inputSuccess3") Input with success
div.col-sm-9
input.form-control#inputSuccess3(type="text")
span.glyphicon.glyphicon-ok.form-control-feedback
form.form-inline(role="form")
div.form-group.has-success.has-feedback
label.control-label(for="inputSuccess4") Input with success
input.form-control#inputSuccess4(type="text")
span.glyphicon.glyphicon-ok.form-control-feedback
Raw
file61.txt
form(role="form")
input.form-control.input-lg(type="text", placeholder=".input-lg")
input.form-control(type="text", placeholder="Default input")
input.form-control.input-sm(type="text", placeholder=".input-sm")
select.form-control.input-lg
option .input-lg
select.form-control
option Default input
select.form-control.input-sm
option .input-sm
Raw
file62.txt
form(role="form")
div.row
div.col-xs-2
input.form-control(type="text", placeholder=".col-xs-2")
div.col-xs-3
input.form-control(type="text", placeholder=".col-xs-3")
div.col-xs-4
input.form-control(type="text", placeholder=".col-xs-4")
Raw
file63.txt
div.form-group
input.form-control#inputEmail1(type="text")
span.help-block A block of help text that breaks onto a new line and may extend beyond one line.
Raw
file64.txt
form(role="form")
button.btn.btn-default(type="button") Default
button.btn.btn-primary(type="button") Primary
button.btn.btn-success(type="button") Success
button.btn.btn-info(type="button") Info
button.btn.btn-warning(type="button") Warning
button.btn.btn-danger(type="button") Danger
button.btn.btn-link(type="button") Link
Raw
file65.txt
form(role="form")
p
button.btn.btn-primary.btn-lg(type="button") Large
button.btn.btn-default.btn-lg(type="button") Large
p
button.btn.btn-primary(type="button") Default
button.btn.btn-default(type="button") Default
p
button.btn.btn-primary.btn-sm(type="button") Small
button.btn.btn-default.btn-sm(type="button") Small
p
button.btn.btn-primary.btn-xs(type="button") Xtra Small
button.btn.btn-default.btn-xs(type="button") Xtra Small
Raw
file66.txt
form(role="form")
div.row
div.col-md-offset-3.col-md-6
button.btn.btn-primary.btn-block(type="button") Block level button
button.btn.btn-default.btn-block(type="button") Block level button
Raw
file67.txt
form(role="form")
div.form-group
p.help-block Normal
button.btn.btn-primary(type="button") Primary button
button.btn.btn-default(type="button") Button
div.form-group
p.help-block Active (pressed)
button.btn.btn-primary.active(type="button") Primary button
button.btn.btn-default.active(type="button") Button
Raw
file68.txt
form(role="form")
div.form-group
p.help-block Normal
a.btn.btn-primary(href='#', role="button") Primary link
a.btn.btn-default(href='#', role="button") Link
div.form-group
p.help-block Active
a.btn.btn-primary.active(href='#', role="button") Primary link
a.btn.btn-default.active(href='#', role="button") Link
Raw
file69.txt
form(role="form")
div.form-group
p.help-block Normal
button.btn.btn-primary(type="button") Primary button
button.btn.btn-default(type="button") Button
div.form-group
p.help-block Disabled
button.btn.btn-primary(type="button", disabled) Primary button
button.btn.btn-default(type="button", disabled) Button
Raw
file7.txt
$ gem install jekyll
Raw
file70.txt
form(role="form")
div.form-group
p.help-block Normal
a.btn.btn-primary(href='#', role="button") Primary link
a.btn.btn-default(href='#', role="button") Link
div.form-group
p.help-block Disabled
a.btn.btn-primary.disabled(href='#', role="button") Primary link
a.btn.btn-default.disabled(href='#', role="button") Link
Raw
file71.txt
form(role="form")
a.btn.btn-default(href="#", role="button") Link
button.btn.btn-default(type="submit") Button
input.btn.btn-default(type="button", value="Input")
input.btn.btn-default(type="submit", value="Submit")
Raw
file72.txt
img.img-responsive(src="https://g.twimg.com/Twitter_logo_blue.png", alt="Responsive image")
Raw
file73.txt
div.container
- var url = "http://upload.wikimedia.org/wikipedia/en/3/3b/Dark_Side_of_the_Moon.png"
img(src=url)
img.img-rounded(src=url)
img.img-circle(src=url)
img.img-thumbnail(src=url)
Raw
file74.txt
button.close(type="button", aria-hidden="true") &times;
Raw
file75.txt
// 実は文字は何でもいい
div
p.close あ
span.close あ
Raw
file76.txt
// ソースより
// 通常状態 - 白地100%に黒文字100%なので50%では濃すぎるということ
filter: alpha(opacity=20);
// マウスをかざした時(感覚的にはこれくらいかな...)
filter: alpha(opacity=50);
Raw
file78.txt
// spanでも同じ
div.pull-left X
div.pull-right Y
| あいうえお
Raw
file79.txt
Xあいうえお Y
Raw
file8.txt
$ jekyll serve
Raw
file80.txt
// 中央に来ない
div.center-block あいうえお
Raw
file81.css
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
Raw
file81.txt
// 中央に来ない
div.center-block あいうえお
Raw
file82.css
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
Raw
file82.txt
// 文字は表示されないが行は空く
// (background-imageで同じ文字をかっこいいフォントで表示するような場合)
h1.text-hide#custom-heading Custom heading
Raw
file83.css
/* たぶんこんな感じ(未確認) */
#custom-heading {
background-image: url(../image/custom-heading.png);
}
Raw
file83.txt
// 文字は表示されないが行は空く
// (background-imageで同じ文字をかっこいいフォントで表示するような場合)
h1.text-hide#custom-heading Custom heading
Raw
file84.css
/* たぶんこんな感じ(未確認) */
#custom-heading {
background-image: url(../image/custom-heading.png);
}
Raw
file84.txt
xtra-small small medium large
-------------- ---------- ---------- ---------- ----------
.visible-xs visible hidden hidden hidden
.visible-sm hidden visible hidden hidden
.visible-md hidden hidden visible hidden
.visible-lg hidden hidden hidden visible
.hidden-xs hidden visible visible visible
.hidden-sm visible hidden visible visible
.hidden-md visible visible hidden visible
.hidden-lg visible visible visible hidden
Raw
file85.txt
browser print
-------------- ---------- ----------
.visible-print hidden visible
.hidden-print visible hidden
Raw
file86.txt
span.glyphicon.glyphicon-thumbs-up
| いいね!
Raw
file87.txt
div.btn-toolbar
div.btn-group
- var alignments = ['left', 'center', 'right', 'justify']
- for (var i = 0; i < alignments.length; ++i)
button.btn.btn-default
span(class = 'glyphicon glyphicon-align-' + alignments[i])
div.btn-toolbar
- var sizes = [' btn-lg', '', ' btn-sm', ' btn-xs']
- for (var i = 0; i < sizes.length; ++i)
button(class = 'btn btn-default' + sizes[i])
span.glyphicon.glyphicon-star
| Star
Raw
file88.txt
div.dropdown
button.btn.dropdown-toggle.sr-only#dropdownMenu1(type="button", data-toggle="dropdown") Dropdown
span.caret
ul.dropdown-menu(role="menu", aria-labelledby="dropdownMenu1")
li(role="presentation")
a(role="menuitem", tabindex="-1", href="#") Action
li(role="presentation")
a(role="menuitem", tabindex="-1", href="#") Another action
li(role="presentation")
a(role="menuitem", tabindex="-1", href="#") Something else here
li.divider(role="presentation")
li(role="presentation")
a(role="menuitem", tabindex="-1", href="#") Separated link
Raw
file89.txt
// このように修正すれば動く(.sr-onlyを完全消去)
// 行末(Dropdownの後)にスペース1つが必要(ないとcaretと密着する)
button.btn.dropdown-toggle#dropdownMenu1(type="button", data-toggle="dropdown") Dropdown
span.caret
Raw
file9.txt
...
{% include components/navs.html %}
{% include components/navbar.html %}
{% include components/breadcrumbs.html %}
...
Raw
file90.txt
div.dropdown
button.btn.dropdown-toggle(type="button", data-toggle="dropdown") Dropdown
span.caret
ul.dropdown-menu
li: a(href="#") Action
li: a(href="#") Another action
li: a(href="#") Something else here
li.divider
li: a(href="#") Separated link
Raw
file91.txt
div.dropdown
button.btn.dropdown-toggle(type="button", data-toggle="dropdown") Dropdown
span.caret
ul.dropdown-menu
li.dropdown-header Dropdown header
li: a(href="#") Action
li.disabled: a(href="#") Disabled
li: a(href="#") Something else here
li.divider
li.dropdown-header Dropdown header
li: a(href="#") Separated link
Raw
file92.txt
div.btn-group
- var items = ["Left", "Middle", "Right"]
- for (var i = 0; i < items.length; ++i)
button.btn.btn-default(type='button')= items[i]
Raw
file93.txt
div.btn-toolbar
div.btn-group
- for (var i = 1; i <= 4; ++i)
button.btn.btn-default(type='button')= i
div.btn-group
- for (var i = 5; i <= 7; ++i)
button.btn.btn-default(type='button')= i
div.btn-group
button.btn.btn-default(type='button') 8
Raw
file94.txt
- var sizes = ['lg', null, 'sm', 'xs']
- var items = ['Left', 'Center', 'Right']
- for (var sz = 0; sz < sizes.length; ++sz)
div.btn-toolbar
- var klass = 'btn-group'
- if (sizes[sz]) klass += ' btn-group-' + sizes[sz]
div(class=klass)
- for (var i = 0; i < items.length; ++i)
button.btn.btn-default(type='button')= items[i]
Raw
file95.txt
div.btn-group
- for (var i = 1; i <= 2; ++i)
button.btn.btn-default(type='button')= i
div.btn-group
button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown') Dropdown
span.caret
ul.dropdown-menu
- for (var j = 1; j <= 2; ++j)
li: a(href='#') Dropdown link
Raw
file96.txt
div.btn-group-vertical
- for (var i = 1; i <= 2; ++i)
button.btn.btn-default(type='button') Button
div.btn-group
button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown') Dropdown
span.caret
ul.dropdown-menu
- for (var j = 1; j <= 2; ++j)
li: a(href='#') Dropdown link
- for (var i = 1; i <= 2; ++i)
button.btn.btn-default(type='button') Button
- for (var i = 0; i < 3; ++i)
div.btn-group
button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown') Dropdown
span.caret
ul.dropdown-menu
- for (var j = 1; j <= 2; ++j)
li: a(href='#') Dropdown link
Raw
file97.txt
- var items = ['Left', 'Center', 'Right']
// aを使う場合
div.btn-group.btn-group-justified
- for (var i = 0; i < items.length; ++i)
a.btn.btn-default= items[i]
// buttonを使う場合
div.btn-group.btn-group-justified
- for (var i = 0; i < items.length; ++i)
// ここにもう一段必要
div.btn-group
button.btn.btn-default(type='button')= items[i]
Raw
file98.txt
- var types = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']
- for (var i = 0; i < types.length; ++i)
div.btn-group
- var klass = 'dropdown-toggle btn btn-' + types[i].toLowerCase()
button(class=klass, type='button', data-toggle='dropdown')
= types[i] + ' '
span.caret
ul.dropdown-menu
li: a(href='#') Action
li: a(href='#') Another Action
li: a(href='#') Something else here
li.divider
li: a(href='#') Separated link
Raw
file99.txt
- var types = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']
- for (var i = 0; i < types.length; ++i)
div.btn-group
- var klass = 'btn btn-' + types[i].toLowerCase()
button(class=klass, type='button')= types[i]
button(class=klass + ' dropdown-toggle', type='button', data-toggle='dropdown')
span.caret
ul.dropdown-menu
li: a(href='#') Action
li: a(href='#') Another Action
li: a(href='#') Something else here
li.divider
li: a(href='#') Separated link
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment