Bootstrap日本語リファレンス(非公式)

des11
こちらにまとめたものを動作未確認のものもあります。またかなり情報少なめかとも思います。

はじめに

こちらにまとめたものを動作未確認のものもあります。
またかなり情報少なめかとも思います。

情報にはやくたどりつくためには chromeをお使いのかたは
★[ctrl + F] をおしていただき、目的の情報を検索してください★

情報が見つからなかった場合すみやかにブラウザバックしてください。
目的の情報はおそらくありません。

テキスト(text)

□テキストの配置

左寄せ: 

こんにちは

中央寄せ: 

こんにちは

右寄せ: 

こんにちは

□テキストの字体を変える

太字: 

太字こんにちは

細字: 

細字こんにちいは

□テキストのサイズを変える
[1,2,3,4]: 4段階 →

こんにちは

背景色を指定する(background)

□背景色の指定
青色の背景色: 

width, heightを指定する(横と縦の幅)

widht, heightを親に対して何%かを指定する
※定格値でしか指定できない。たとえばw-20(20%)などは指定できない

□width
25%: 

50%: 

75%: 

100%: 

□height
25%: 

50%: 

75%: 

100%: 

margin, padding

[pもしくはm][location]-[size] location: t, b, l, r, 横方向ならx, 縦方向ならy
size:
[1,2,3,4,5]は
[0.25rem, 0.5rem, 1.0rem, 1.5rem, 3.0rem]を表している
auto

※例:中央寄せ
my-0 mx-auto

フロート(float)

左寄せ: 

右寄せ: 

右寄せ

ディスプレイ(d-[ ])

表示しない: 

こんにちは

ブロックボックス: 

こんにちは

インラインボックス: 

こんにちは

インラインブロックボックス: 

こんにちは

※bootstrapでは文字サイズ変更のdisplayと混同しないように注意

Position(ポジション)

ポジションの指定のみで値は指定できないみたい。

初期値: 

自由に動ける: 

親を基準にどう動くか: 

ボーダー(border)

□ボックスの四辺に線を引く

青色のボーダー: 

細い黒のボーダー: 

緑色のボーダー: 

赤色のボーダー: 

オレンジ色のボーダー: 

水色のボーダー: 

明るい色のボーダー: 

黒色のボーダー: 

白色のボーダー: 

□各辺を指定する消したかったら 0 を指定する




□border-radius(角丸や正円を表現する)

角丸を表現する: 

上の2つ:

右の2つ:

下の2つ:

左の2つ:


正円: 

グリッド


https://matome.naver.jp/odai/2151575086819147301/2151576510424044103
containerクラスを使用すると
グリッド(等間隔配置?)にできる

colに値を指定しなかったらいくつもかくことができる

1


https://matome.naver.jp/odai/2151575086819147301/2151576524424073603
colに値を指定する場合は12等分で指定する
1
2
3

table

テーブルにする:

ボーダーをつける: 

ホバーで変化をつける: 

交互に色を変える: 

行間の狭いテーブル: 

レスボンシブテーブル: 

ブレークポイント

[576px, 768px, 992px, 1200px]は
[sm, md, lg, xl]というキーワードに対応している

1200px以上で消したい: 

こんにちは

992px以上で表示したい: 

こんにちは

コツ

ものを動かすときは大きな枠組みから考える

3カラム


https://matome.naver.jp/odai/2151575086819147301/2151576392323738903






https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css”
integrity=”sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy”
crossorigin=”anonymous”>

Hello, world!


header
left
center
right
footer






タブメニュー

こんにちは

世界

ul: nav nav-tabs
li: nav-item a: nav-link active

コンテンツ
div: tab-pane active

通常のナビゲーション

class=”container”


https://matome.naver.jp/odai/2151575086819147301/2151582735045651003
hello
hello
hello
hello

https://matome.naver.jp/odai/2151575086819147301/2151582778545852203
自分で作ったclassとの比較

containerクラスはbox-containerの高さは見ていないことがわかる

hello
hello
hello
hello

bootstrapまとめエクセルファイル

https://matome.naver.jp/odai/2151575086819147301
2018年01月13日