BootStrapはじめました

  • このエントリーをはてなブックマークに追加

bootstrap

こんにちは
かねしろ@pinkrootです。

今日はTwitter BootStrapの学習・実践をしました。

前々から凄く重要なスキルだなぁと思いつつも、中々手を出せずにいたので、まとまった時間が確保できた本日、勢いそのままにひと通りやってみたという感じです。

具体的には公式のリファレンスを読みながら、必要そうな機能を実際に実装して試す、というアクションを取り続けたのち、前々から考えていたサービスの一つを試しに実装してみるという流れで学習を行いました。

公式のリファレンスは以下4ページがメイン。

公式以外で参考にしたのは以下。

実装したシステムは裏側の部分(flaskで実装)がまだ完成していないので、後日公開、ということで。

代わりといってはなんですが、私がBootStrapの学習中に書いたメモ(走り書き)を以下に共有します。
あくまで個人用途なので記述が雑&リファレンス読んだほうが早いと思ったものはリンクに留めてる、という形ではありますが、参考になる方がいれば幸いです。

BootStrapメモ

サムネイル状に表示する

グリッドレイアウト

数値の合計が12になるようにするらしい
公式リファレンスに、たまに合計9にしかならない記述があるけど、あれはなんだろう?

とかでその分ずらすこともできる。

背景色とかの指定

普通にCSS書いちゃえばOK

センタリング

コンテンツ全体を

で囲むとできる。

要所要所をセンタリングしたい場合は従来通りCSS書いたほうがいいみたい。
もしくはspanでうまくずらして表示するとか。

fluid layout

Responsive Designについて

あとでこのサイトを読もう

文字装飾

でリード文として少し大きくなる

で囲むとで小さくなる

普段使ってるhtmlについて

また、

で横書きの説明文リストみたいな奴がつくれる

tableについて

それにclassを追加していくことでデザインを変えられる。

また、

に様々なクラスをつけることで色を付けられる

Formについて

公式ドキュメントはこちらです

Buttons

タグにclassをつけることで色々と実現できる。

参考

Disabledについて

classに

ってつけると、押せないボタンとかリンクが作れる。
フォームに未入力部があるときとかこれ使えるかも・・・?

img

icon

公式リファレンス

Button Groups

公式リファレンス

ボタンのグループ化とかトグルなボタンとか。

Tab

をulにつける

との組み合わせも出来る

縦表示

普通の縦表示

かっこいい縦表示

Navigation

.containerの中に書く必要あり

区切り線を付けたい場合は

とつける

ってのもある。

でトップに表示される。
paddingとか入れてほしくない場合は

色を黒ベースにしたい場合は

Breadcrumbs

でパンくずリストの様な表示ができる

ページのコントロール(次のページ、とか)

公式リファレンス

Typographic

公式リファレンス

Alerts

単体

ブロック

種類

Progress Bars

公式リファレンス

以上です。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。