各種ボタン類

普通のボタン

HTML Source ソースの上で右クリックしてコピーしてください。
<a href="#" class="btn btn-default">Buton</a> <a href="#" class="btn btn-primary">Buton</a> <a href="#" class="btn btn-success">Buton</a> <a href="#" class="btn btn-info">Buton</a> <a href="#" class="btn btn-warning">Buton</a> <a href="#" class="btn btn-danger">Buton</a>

連結ボタン

HTML Source ソースの上で右クリックしてコピーしてください。
<div class="btn-toolbar"> <div class="btn-group"> <a href="#" class="btn btn-default">1</a> <a href="#" class="btn btn-default">2</a> <a href="#" class="btn btn-default">3</a> <a href="#" class="btn btn-default">4</a> </div> <div class="btn-group"> <a href="#" class="btn btn-default">5</a> <a href="#" class="btn btn-default">6</a> <a href="#" class="btn btn-default">7</a> </div> <div class="btn-group"> <a href="#" class="btn btn-default">8</a> <div class="btn-group"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div>

縦ボタン

Button Button Button Button

HTML Source ソースの上で右クリックしてコピーしてください。
<div class="btn-group-vertical"> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> </div>

横並びボタン

Left Middle Right

HTML Source ソースの上で右クリックしてコピーしてください。
<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div>

Pills

HTML Source ソースの上で右クリックしてコピーしてください。
<ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li class="disabled"><a href="#">Disabled</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul>

Pagination

HTML Source ソースの上で右クリックしてコピーしてください。
<ul class="pagination"gt; <li class="disabled"gt;<a href="#"gt;≪</agt;</ligt; <li class="active"gt;<a href="#"gt;1</agt;</ligt; <ligt;<a href="#"gt;2</agt;</ligt; <ligt;<a href="#"gt;3</agt;</ligt; <ligt;<a href="#"gt;4</agt;</ligt; <ligt;<a href="#"gt;5</agt;</ligt; <ligt;<a href="#"gt;≫</agt;</ligt; </ulgt;

Pager

HTML Source ソースの上で右クリックしてコピーしてください。
<ul class="pager"gt; <ligt;<a href="#"gt;Previous</agt;</ligt; <ligt;<a href="#"gt;Next</agt;</ligt; </ulgt; <ul class="pager"gt; <li class="previous disabled"gt;<a href="#"gt;← Older</agt;</ligt; <li class="next"gt;<a href="#"gt;Newer →</agt;</ligt; </ulgt;

Popovers

HTML Source ソースの上で右クリックしてコピーしてください。
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Left</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Top</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Bottom</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Right</button>

haird部に以下のソースを配置してください。
<script type="text/javascript">
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>

Tooltips

HTML Source ソースの上で右クリックしてコピーしてください。
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>

haird部に以下のソースを配置してください。
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>