Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)

更新時(shí)間：2016年12月07日 08:56:34 作者：kikay

這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用input輸入框組，可以很容易地向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>input控件組</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3"></div>
 <div class="col-lg-6">
 <div class="page-header">
 <h1>樣式1</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button type="button" class="btn btn-primary">搜索</button>
 </div>
 </div>
 <div class="page-header">
 <h1>樣式2</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <div class="dropdown">
  <button type="button" class="btn btn-primary" data-toggle="dropdown">
  下拉菜單
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜單1</a></li>
  <li><a href="#">菜單2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜單3</a></li>
  <li><a href="#">菜單4</a></li>
  </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3"></div>
</div>
</body>
</html>

效果如下：

如果和input配合使用的按鈕是不可單擊的，只是用于文字的說(shuō)明，修改如下：

<div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-addon">用來(lái)搜索</div>
</div>

效果如下：

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

setTimeout函數(shù)的神奇使用
setTimeout函數(shù)是一個(gè)原生的javascript函數(shù)。setTimeout函數(shù)會(huì)在一個(gè)指定的延遲時(shí)間之后調(diào)用一個(gè)函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個(gè)頁(yè)面一段時(shí)間后彈出一個(gè)對(duì)話框，或者是鼠標(biāo)點(diǎn)擊某個(gè)元素后隔幾秒鐘在刪除這個(gè)元素。
2017-02-02
原生js實(shí)現(xiàn)放大鏡
本文主要分享了原生js實(shí)現(xiàn)放大鏡效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
ES6中的Promise代碼詳解
本文通過(guò)實(shí)例代碼給大家介紹了ES6中的Promise，感興趣的朋友參考下吧
2017-10-10
微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能,結(jié)合實(shí)例形式分析了微信小程序picker組件進(jìn)行日期與時(shí)間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
Javascript日期格式化format函數(shù)的使用方法
這篇文章主要介紹的是javascript時(shí)間格式format函數(shù)，我們有時(shí)候調(diào)用的new Date()不是格式化的時(shí)間，可能顯示不是很正常，那么這時(shí)候就需要格式化時(shí)間，今天這里分享一個(gè)javascript的foramt()函數(shù)，有需要的可以參考借鑒。
2016-08-08
javascript 對(duì)象數(shù)組根據(jù)對(duì)象object key的值排序
本文僅僅是實(shí)現(xiàn)了javascript 對(duì)象數(shù)組根據(jù)對(duì)象object key的值排序，算是對(duì)自己學(xué)習(xí)javascript這么久的一個(gè)小結(jié)，希望大家能夠喜歡
2015-03-03
使用js簡(jiǎn)單實(shí)現(xiàn)了tree樹(shù)菜單
使用js簡(jiǎn)單實(shí)現(xiàn)了樹(shù)菜單！具體實(shí)現(xiàn)實(shí)例代碼如下，相信自己你一定可以實(shí)現(xiàn)的更好
2013-11-11
javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼
這篇文章主要介紹了javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼,需要的朋友可以參考下
2016-03-03
ajax java 實(shí)現(xiàn)自動(dòng)完成功能
都知道百度建議是用ajax做的，想要做的快速穩(wěn)定，可復(fù)制可移植就不容易了,花時(shí)間研究還不如自己來(lái)寫(xiě)。根據(jù)一個(gè)pdf文檔提供的資料，用了小半天時(shí)間，終于實(shí)現(xiàn)了。在此與大家分享
2012-12-12
JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02