シェアする

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

BootStrapはじめました

bootstrap

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

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

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

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

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

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

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

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

BootStrapメモ

サムネイル状に表示する

<ul class="thumbnails">
    <li class="span4">
    <a href="#" class="thumbnail">
    <img src="http://placehold.it/300x200" alt="">
    </a>
    </li>
    ...
</ul>

グリッドレイアウト

<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にしかならない記述があるけど、あれはなんだろう?

offset2

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

背景色とかの指定

普通にCSS書いちゃえばOK

センタリング

コンテンツ全体を

div class="container"  

で囲むとできる。

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

fluid layout

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
        </div>
        <div class="span10">
            <!--Body content-->
        </div>
    </div>
</div>

Responsive Designについて

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

文字装飾

class="lead"

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

<small>

で囲むとで小さくなる

グレーの文字
<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について

<blockquote>
<ul>, <ol>, <li>
<dl>, <dt>, <dd>
とか普通に使えるよ

また、

<dl class="dl-horizontal">
    <dt>タイトル1</dt>
    <dd>本文1</dd>
    <dt>タイトル2</dt>
    <dd>本文2</dd>
</dl>

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

tableについて

<table class="table">で普通よりかっこいいテーブル

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

<table class="table table-striped">
<table class="table table-bordered">
<table class="table table-hover">
<table class="table table-condensed">

また、

<tr>

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

.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

<button>

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

.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に

disabled

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

img

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

icon

公式リファレンス

Button Groups

公式リファレンス

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

Tab

.nav
をつけたうえで
.nav-tabs
.nav-pills

をulにつける

.dropdown-toggle

との組み合わせも出来る

縦表示

普通の縦表示

.nav nav−list

かっこいい縦表示

.tabbable bats-left

Navigation

.containerの中に書く必要あり

<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>

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

<li>に
.divider-vertical

とつける

.navbar-search pull-left

ってのもある。

.navbar-fixed-top

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

.navbar-static-top

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

.navbar-inverse

Breadcrumbs

<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

単体

<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>

ブロック

<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>

種類

.alert alert-info
.alert alert-error
.alert alert-success

Progress Bars

公式リファレンス

以上です。

スポンサードリンク

AdSense

AdSense

シェアする

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

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です