Boostrap 布局組件(二)
阿新 • • 發佈:2017-07-02
菜單 image blog ava nbsp log class cti 堆疊
1.Bootstrap 按鈕下拉菜單
向按鈕添加下拉菜單,只需要簡單地在在一個 .btn-group 中放置按鈕和下拉菜單即可。您也可以使用 <span class="caret"></span> 來指示按鈕作為下拉菜單。
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默認 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一個功能</a> </li> </ul> </div>
1.1分割的按鈕下拉菜單
分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式,但是對下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能,右邊是顯示下拉菜單的切換。
<div class="btn-group"> <button type="button" class="btn btn-default">默認</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切換下拉菜單</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一個功能</a></li> </ul> </div>
1.3按鈕上拉菜單
菜單也可以往上拉伸的,只需要簡單地向父 .btn-group 容器添加 .dropup 即可。
<div class="row" style="margin-left:50px; margin-top:200px"> <div class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默認 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一個功能</a> </li> </ul> </div> </div>
2.Bootstrap 輸入框組
向 .form-control 添加前綴或後綴元素的步驟如下:
- 把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。
- 接著,在相同的 <div> 內,在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
- 把該 <span> 放置在 <input> 元素的前面或者後面。
為了保持跨瀏覽器的兼容性,請避免使用 <select> 元素,因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class,輸入框組是一個孤立的組件。
2.1基本的輸入框組
<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> </form> </div>
2.2復選框和單選插件
<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-5"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"></span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-5 --> <div class="col-lg-5"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"></span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-5 --> </div><!-- /.row --> </form> </div>
2.3按鈕插件
把按鈕作為輸入框組的前綴或者後綴元素,這個時候您就不是添加 .input-group-addon class,您需要使用 class.input-group-btn 來包裹按鈕。
<div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div>
3.Bootstrap 導航元素
表格導航或標簽
創建一個標簽式的導航菜單:
- 以一個帶有 class .nav 的無序列表開始。
- 添加 class .nav-tabs。
<p>標簽式的導航菜單</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
3.1垂直的膠囊式導航菜單
使用 class .nav、.nav-pills 的同時使用 class .nav-stacked,讓膠囊垂直堆疊。
<p>垂直的膠囊式導航菜單</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
3.2下拉菜單
帶有下拉菜單的標簽
向標簽添加下拉菜單的步驟如下:
- 以一個帶有 class .nav 的無序列表開始。
- 添加 class .nav-tabs。
- 添加帶有 .dropdown-menu class 的無序列表。
<p>帶有下拉菜單的標簽</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
Boostrap 布局組件(二)