Jumbotron

JumbotronはWebサイトのファーストビューに表示されるような、サイトメッセージなどの重要なコンテンツを掲載します。

BootStrapを試しました

レスポンシブです

「.jumbotron」は、左右の余白を含みますが、「.jumbotron .jumbotron-fluid"」を指定すると、余白0の画面100%表示されます。

ボタン

例： 
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
結果：

 

ボタンは、<button>タグの代わりに、<a>タグ、<input>タグを使うこともできます。

例： 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
結果：
Link

 

ボタンサイズ

例： 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary btn-sm">Large button</button>
結果：

 

  • .btn-block : 横幅100%のボタン
例： 
<button type="button" class="btn btn-primary btn-block">Large button</button>
結果：

 


ボタンの状態

  • .active : アクティブなときにボタンが押されたように見せます
  • .disabled : ボタンの無効状態


Methods

  • $().button('toggle')：Activeなどの状態を切り替えます。
  • $().button('dispose')：要素を破棄します。
例： 
<button href="#" class="btn btn-primary" id="methods-test">Toogle</button>
<button href="#" class="btn btn-primary" id="methods-test2" role="button" data-toggle="buttons">Dispose</button>
<script>
// ActiveをToggleする
$("#methods-test").click(function(){
$(this).button('toggle');
});

// data-toggleを削除
$("#methods-test2").click(function(){
$(this).button('dispose').removeAttr('data-toggle');
});
</script>
結果：


パンくずリストも作れます