bootstrap 列表 表格 表單 復選 單選 多選 輸入框組


一、列表 ul li

二、表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html)

1. 基本表格 <table class="table">

2. 響應式表格 <div class="table respoinsive"><talbe >
單獨設立標題樣式 標頭樣式

 三、表單

第一種:常規樣式(垂直)
<form role="form">
<!-- form-group 設置一組,所有的文本框input=text,textarea,select 設置form-countrol-->
<div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div>
<div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> //文本框只需要設置input的類型type=“file” <p class="help-block">這里是塊級幫助文本的實例。</p> //幫助說明的樣式,文字顏色淺灰色 </div> </form>

備注:一行整合在一起:  <span class="input-group-addon">$</span>

第二種:內聯表單(左對齊) <form class="form-horizontal" role="form">

第三種:Bootstrap 支持最常見的表單控件,主要是 input、textarea、checkbox、radio 和 select
Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、
search、tel
color。適當的 type 聲明是必需的,這樣才能讓 input 獲得完整的樣式。
文本框: <textarea class="form-control" rows="3"></textarea>
選擇框: 復選checkbox 單選radio
<label for="name">默認的復選框和單選按鈕的實例</label> <div class="checkbox"> <label><input type="checkbox" value="">選項 1</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">選項 2</label> </div>
<!-- radio name名稱相同,id不同 label的作用是為了讓選項和文字作為一個block-->
<div class="radio">
   <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項 1 </label>
</div>
<div class="radio">
   <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 選項 2 - 選擇它將會取消選擇選項 1 </label>
</div>

內聯的選擇框 :
<div>
   <label class="checkbox-inline">      <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1   </label>
   <label class="checkbox-inline">      <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2   </label>
</div>
第四種:選擇框 
單選: <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select>
多選: <select multiple  class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select>

第五種:純文本控件(不需要修改,例如id,注冊的用戶名) <p class="form-control-static">
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼"> </div> </div> </form> 

四、圖片

三種圖片效果 圓角 圓形 照片加邊框
<img src=""   class="img-rounded">
<img src=""   class="img-circle">
<img src=""   class="img-thumbnail">

五、顯示下拉式功能

  <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">一個鏈接</a></li>
          <li><a href="#">另一個鏈接 link</a></li>
          <li><a href="#">其他功能</a></li>
        </ul>
      </div>  

 六、關閉按鈕

 <button type="button" class="close" aria-hidden="true">  ×  </button>

 七、輸入框組

文本框前面可以加上select選擇框,可用於(全文檢索、標題檢索)等場景

八、導航  標簽式導航 nav-tabs  , 膠囊式導航nav-pills ,垂直的膠囊式導航 <ul class="nav nav-pills nav-stacked">

<ul class="nav nav-tabs">
<li class="active">首頁</li>
<li>分類1</li>
<li>分類2</li>
<li>分類3</li>
</ul>

 九、導航欄 (和導航的區別,在移動設備中可以折疊)

響應式的導航欄,可用於手機端的分類展開,或者導航展開
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切換導航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">頭部文字</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM