QHMの新タイプHAIKの活用と実験、オープンソースの活用

Tag: bootstrap

※ テストはhtmlプラグインを利用して、記述している。

ボタンの色と大きさ

<button class="btn btn-info">class は、btn btn-info</button>
<button class="btn btn-primary btn-lg">class は、btn btn-primary btn-lg</button>
<button class="btn btn-default  btn-xs">class は、btn btn-default btn-xs</button>
<button class="btn btn-warning  btn-sm">class は、btn btn-warning btn-sm</button>
<button class="btn btn-danger">class は、btn btn-danger</button>
<button class="btn btn-link">class は、btn btn-link</button>

横幅一杯のボタン

<button class="btn btn-warning btn-block">ブロックの横幅一杯、classは、btn btn-warning btn-block</button>

ドロップダウンボタンかな

<div class="btn-group">
	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="">action1</a></li>
		<li><a href="">action2</a></li>
		<li><a href="">action3</a></li>
	</ul>
</div>
 
<br>
<div class="btn-group">
	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="">action1</a></li>
		<li><a href="">action2</a></li>
		<li><a href="">action3</a></li>
	</ul>
</div>
 
 
<br>
<div class="btn-group">
	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="">action1</a></li>
		<li><a href="">action2</a></li>
		<li><a href="">action3</a></li>
	</ul>
</div>
 
 
<br>
<div class="btn-group">
	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="">action1</a></li>
		<li><a href="">action2</a></li>
		<li><a href="">action3</a></li>
	</ul>
</div>

ボタンを押すと内容を表示

<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button Name
</button>
<div class="collapse" id="collapseExample">
<div class="well">
<p>ここに文章を書く。<br>２段目<br>３段目<br>４段目<br>５段目</p>
</div>
</div>

アコーディオンのテスト途中だったかな

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
 
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
 
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>