2015/06/20  Bootstrap 

Bootstrapには標準で用意されているクラスがあるのでまとめてみました。

text-align テキストの左・中央・右寄せ

text-left

左寄せテキスト

<p class="text-left">左寄せテキスト</p>

text-center

中央寄せテキスト

<p class="text-center">中央寄せテキスト</p>

text-right

右寄せテキスト

<p class="text-right">右寄せテキスト</p>

float コンテンツの左・右寄せ

pull-left

<div class="pull-left">...</div>
// Classes
.pull-left {
  float: left !important;
}

// Usage as mixins
.element {
  .pull-left();
}

pull-right

<div class="pull-right">...</div>
// Classes
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-right();
}

blockコンテンツの中央寄せ

center-block

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

clearfix

clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ul li リスト

list-unstyled

  • リスト1
  • リスト2
  • リスト3
<ul class="list-unstyled">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

list-inline

  • リスト1
  • リスト2
  • リスト3
<ul class="list-inline">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

画像

img-rounded

<img src="..." alt="..." class="img-rounded">

img-circle

<img src="..." alt="..." class="img-circle">

img-thumbnail

<img src="..." alt="..." class="img-thumbnail">

img-responsive

.img-responsiveでレスポンシブに画像を調節してくれます。

imgsample

<img src="..." class="img-responsive" >

img-responsiveの画像をセンター寄せにする方法