欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Bootstrap輸入框組件使用詳解

Bootstrap輸入框組件的使用方法，具體內容如下

創(chuàng)新互聯(lián)專注于隨縣企業(yè)網(wǎng)站建設,響應式網(wǎng)站建設,成都商城網(wǎng)站開發(fā)。隨縣網(wǎng)站建設公司,為隨縣等地區(qū)提供建站服務。全流程按需制作網(wǎng)站，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

.input-group——設置div為輸入框組；

.input-group-lg、.input-group-sm、.input-group-xs——改變輸入框組的尺寸；

.input-group-addon——在輸入框前或后加入額外內容；

.input-group-btn——在輸入框前或后加入button或button式下拉菜單組件。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>組件_輸入框組</title>
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
 <!--<link rel="stylesheet" >-->
 <script src="jquery-1.11.1.min.js"></script>
 <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <p>
  <div class="input-group">
   <span class="input-group-addon">$</span>
   <input type="number" class="form-control"/>
   <span class="input-group-addon">.00</span>
  </div>
 </p>
 <p>
 <div class="input-group input-group-lg">
  <span class="input-group-addon">$</span>
  <input type="number" class="form-control"/>
  <span class="input-group-addon">.00</span>
 </div>
 </p>
 <p>
  <div class="row">
   <div class="col-md-4">
    <div class="input-group">
     <span class="input-group-addon">
      <input class="checkbox" type="checkbox"/>
     </span>
     <input type="text" class="form-control"/>
    </div>
   </div>
   <div class="col-md-4">
    <div class="input-group">
     <input type="text" class="form-control" placeholder="馬上查詢"/>
     <span class="input-group-btn">
      <button class="btn btn-primary" type="button" >Go!</button>
     </span>
    </div>
   </div>
   <div class="col-md-4">
    <div class="input-group">
     <div class="input-group-btn">
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       產(chǎn)品分類
       <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" role="menuitem">男裝</a></li>
       <li><a href="#" role="menuitem">女裝</a></li>
       <li><a href="#" role="menuitem">童裝</a></li>
      </ul>
     </div>
     <input type="text" class="form-control" placeholder="清涼一夏">
    </div>
   </div>
  </div>
 </p>
</div>

</body>
</html>

效果：

Bootstrap輸入框組件使用詳解

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：Bootstrap輸入框組件使用詳解
鏈接地址：http://www.chinadenli.net/article2/ggisic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、做網(wǎng)站、用戶體驗、定制網(wǎng)站、網(wǎng)站設計公司、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司