Tag: Bootstrap3
<div class="container"> <div class="col-xs-6" style="background-color: #999;">列1</div> <div class="col-xs-6" style="background-color: #bbb;">列2</div> <div class="col-xs-8" style="background-color: #999;">列1</div> <div class="col-xs-4" style="background-color: #bbb;">列2</div> <div class="col-xs-8" style="background-color: #999;"> <div class="row"> <div class="col-xs-6" style="background-color: #777;">列1-1</div> <div class="col-xs-6" style="background-color: #888;">列1-2</div> </div> </div> <div class="col-xs-4" style="background-color: #bbb;">列2</div> </div>
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <label for="confirm" class="col-sm-2 control-label">確認</label> <div class="col-sm-10"> <div class="checkbox"> <label><input id="confirm" type="checkbox"> ※ラベルタグが無いと位置が揃わない?</label> </div> </div> </div> </form>
<div class="container"> <div class="row"> <form role="form" class="form-inline"> <div class="col-xs-12 col-md-2"> <div class="form-group"> <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> </div> </div> <div class="col-xs-6 col-md-1"> <input type="button" class="btn btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/> </div> </form> </div> </div>
うまくいかない場合、 ですきまをかえるしかないかも。
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
Copy <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div>