欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁等常用組件

 更新時間：2017年05月11日 09:21:46   作者：Cynthia_ying  
這篇文章主要教大家學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁等常用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap輸入框和導(dǎo)航組件

一.下拉菜單

下拉菜單，就是點擊一個元素或按鈕，觸發(fā)隱藏的列表顯示出來。

按鈕和菜單需要包裹在.dropdown 的容器里，而作為被點擊的元素按鈕需要設(shè)置datatoggle=”dropdown”才能有效。對于菜單部分，設(shè)置 class=”dropdown-menu”才能自動隱藏并添加固定樣式。設(shè)置 class=”caret”表示箭頭，可上可下。

示例效果:

這里寫圖片描述

這里寫圖片描述

代碼：

<body>
  <!-- 下拉菜單 -->
  <div class="dropdown"> <!-- 加上open會默認(rèn)顯示下拉菜單選項的內(nèi)容 -->
  <!-- <div class="btn-group dropup"> 向上彈出式 -->
    <button class="btn btn-default" data-toggle="dropdown">
      下拉菜單
      <span class="caret"></span> <!-- 三角符號：當(dāng)dropdown換成dropup時候，三角符號箭頭會向上 -->
    </button>
    <ul class="dropdown-menu"> <!-- dropdown-menu-right 設(shè)置對齊方式：下拉菜單顯示在右邊，默認(rèn)是左邊 -->
      <li> <a href="#">首頁</a></li>
      <li> <a href="#">咨訊</a></li>
      <li> <a href="#">產(chǎn)品</a></li>
      <li> <a href="#">關(guān)于</a></li>
    </ul>
  </div>

  <br><!-- 導(dǎo)航其他選項使用 -->
  <div class="dropdown"> 
    <button class="btn btn-default" data-toggle="dropdown">
      下拉菜單
      <span class="caret"></span> 
    </button>
    <ul class="dropdown-menu"> 
      <li class="dropdown-header">網(wǎng)站導(dǎo)航</li> <!-- 設(shè)置菜單標(biāo)題不加超鏈接 -->
      <li> <a href="#">首頁</a></li>
      <li> <a href="#">咨訊</a></li>
      <li class="divider"> <a href="#">產(chǎn)品</a></li><!-- 設(shè)置菜單分割線 -->
      <li class="disabled"> <a href="#">關(guān)于</a></li> <!-- 設(shè)置菜單禁用項 -->
    </ul>
  </div>

  </body>

二．輸入框組件

文本輸入框就是可以在<input>元素前后加上文字或按鈕，可以實現(xiàn)對表單控件的擴(kuò)展。

例如實現(xiàn)下列的效果：

這里寫圖片描述

代碼示例：

<body>
  <!-- 輸入框組件 -->
  <!-- 左側(cè)添加文字 -->
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
  </div>

  <br><!-- 右側(cè)添加文字 -->
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">@</span>
  </div>

  <br><!-- 兩側(cè)添加文字,并設(shè)置為最大號的輸入框 -->
  <div class="input-group input-group-lg">
    <span class="input-group-addon">￥</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>

  <br><!-- 加復(fù)選框 -->
  <div class="input-group">
    <span class="input-group-addon"><input type="checkbox"></span>
    <input type="text" class="form-control">
  </div>
  <br><!-- 加單選框 -->
  <div class="input-group">
    <span class="input-group-addon"><input type="radio"></span>
    <input type="text" class="form-control">
  </div>

  <br><!-- 使用按鈕 -->
  <div class="input-group">
    <input class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default">提交</button>
    </span>
  </div>

  <br><!-- 右側(cè)使用下拉菜單或分頁式 -->
  <div class="input-group">
    <input ttype="text" class="form-control">
      <div class="input-group-btn"> 
        <button class="btn btn-default" data-toggle="dropdown">
          下拉菜單
          <span class="caret"></span> 
        </button>
        <ul class="dropdown-menu"> 
          <li> <a href="#">首頁</a></li>
          <li> <a href="#">咨訊</a></li>
          <li> <a href="#">產(chǎn)品</a></li>
          <li> <a href="#">關(guān)于</a></li>
        </ul>
      </div>
    </input>
  </div>
  </body>

三. 導(dǎo)航條組件

導(dǎo)航組件，用于實現(xiàn) Web 頁面的欄目操作,導(dǎo)航條是網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。

示例效果：

這里寫圖片描述

代碼：

  <body>
  <!-- 導(dǎo)航條組件 -->
   <!-- navbar-inverse 反轉(zhuǎn)的樣式（背景是黑色）-->
   <!-- navbar-fixed-top導(dǎo)航條固定在頂部，拉動滾動條是始終早頂部顯示導(dǎo)航條， navbar-fixed-bottom固定在底部 -->
   <!-- navbar-static-top 靜態(tài)導(dǎo)航，隨著滾動條滾動，導(dǎo)航條會看不見 -->
  <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container">
      <!-- 基本導(dǎo)航條包含標(biāo)題和列表 -->
      <div class="navbar-header">
        <a href="#" class="navbar-brand">標(biāo)題</a>
      </div>
      <ul class="nav navbar-nav"> 
        <li class="active"> <a href="#">首頁</a></li>
        <li> <a href="#">咨訊</a></li>
        <li> <a href="#">產(chǎn)品</a></li>
        <li> <a href="#">關(guān)于</a></li>
      </ul>

      <!-- 導(dǎo)航條中使用按鈕 -->
      <button class="btn btn-default navbar-btn navbar-right">注冊</button>

      <!-- 導(dǎo)航條中使用表單 -->
      <form class="navbar-form navbar-right"><!-- navbar-right 設(shè)置搜索框靠右顯示 -->
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default">搜索</button>
          </div>
        </div>
      </form>

      <!-- 導(dǎo)航條中使用文本 -->
        <button class="btn btn-default navbar-btn navbar-left">登錄</button>
      <p class="navbar-text">我是一段文字<a href="#" class="navbar-link">鏈接地址</a></p>
    </div>
  </nav>

  <br><br><!-- 面包屑導(dǎo)航（路徑組件） -->
  <ol class="breadcrumb">
    <li><a href="#">首頁</a></li>
    <li><a href="#">產(chǎn)品列表</a></li>
    <li class="active">時尚春款新裝</li>
  </ol>

  </body>

四. 分頁組件

分頁組件可以提供帶有展示頁面的功能。

使用演示：

<!-- 分頁組件 -->
  <ul class="pagination pagination-lg"> <!-- 可設(shè)置的尺寸：lg ,默認(rèn)，sm 和 xs -->
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li> <!-- 設(shè)置為首選項 -->
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="disabled"><a href="#">5</a></li> <!-- 設(shè)置為禁用項 -->
    <li><a href="#">&raquo;</a></li>
  </ul>

  <br><!-- 分頁效果 -->
  <ul class="pager"> <!-- 默認(rèn)會自動居中顯示 -->
    <li><a href="#">上一頁</a></li>
    <li><a href="#">下一頁</a></li>
  </ul>
  <br>
  <ul class="pager"> <!-- 設(shè)置分頁按鈕對齊分頁連接 -->
    <li class="previous"><a href="#">上一頁</a></li>
    <li class="next"><a href="#">下一頁</a></li>
  </ul>

五. 標(biāo)簽組件

<!-- 標(biāo)簽組件 -->
<!-- 在文本后面帶上標(biāo)簽, 標(biāo)簽的樣式有6中：defualt,primary,success,info,warning,danger -->
<h3>標(biāo)簽<span class="label label-default">new</span></h3>

六. 徽章組件

<!-- 徽章 -->
  <a href="#">未讀信息信息<span class="badge">10</span></a>
  <br><!-- 按鈕中使用徽章 -->
  <button class="btn btn-success">
    提交<span class="badge">5</span>
  </button>
  <br><!-- 激活狀態(tài)自動切換色調(diào) -->
  <ul class="nav nav-pills">
    <li><a href="active">首頁<span class="badge">2</span></a></li>
    <li><a href="">咨訊</a></li>
  </ul>

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

相關(guān)文章

  • 將json當(dāng)數(shù)據(jù)庫一樣操作的javascript lib

    將json當(dāng)數(shù)據(jù)庫一樣操作的javascript lib

    使用javascript操作JSON的類庫TAFFY DB，具體介紹了：查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。
    2013-10-10
  • 使用Javascript簡單計算器

    使用Javascript簡單計算器

    這篇文章主要為大家詳細(xì)介紹了使用Javascript簡單計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-11-11
  • IE 條件注釋詳解總結(jié)（附實例代碼）

    IE 條件注釋詳解總結(jié)（附實例代碼）

    IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。
    2009-08-08
  • JS制作適用于手機(jī)和電腦的通知信息效果

    JS制作適用于手機(jī)和電腦的通知信息效果

    這篇文章主要介紹了JS制作適用于手機(jī)和電腦的通知信息效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-10
  • JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼

    JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼

    這篇文章主要介紹了JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼,涉及JavaScript實現(xiàn)頁面元素動態(tài)變換效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • 小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)

    小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)

    小程序獲取用戶信息這部分其實不難,但是,他有點麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • JavaScript實現(xiàn)網(wǎng)絡(luò)測速的方法詳解

    JavaScript實現(xiàn)網(wǎng)絡(luò)測速的方法詳解

    在我們的日常生活中離不開網(wǎng)絡(luò)，而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗。本文就來帶大家了解如何用JavaScript實現(xiàn)網(wǎng)絡(luò)測速，需要的可以參考一下
    2023-01-01
  • JavaScript實現(xiàn)手寫promise的示例代碼

    JavaScript實現(xiàn)手寫promise的示例代碼

    promise?作為前端開發(fā)中常用的函數(shù)，解決了?js?處理異步時回調(diào)地獄的問題，大家應(yīng)該也不陌生了，今天來學(xué)習(xí)一下?promise?的實現(xiàn)過程吧
    2023-04-04
  • 深入理解Javascript閉包 新手版

    深入理解Javascript閉包 新手版

    最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫的大多是非常的學(xué)術(shù)和專業(yè)。對于初學(xué)者來說別說理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫此文的目的就是用最通俗的文字揭開Javascript閉包的真實面目。
    2010-12-12
  • 使用Post提交時須將空格轉(zhuǎn)換成加號的解釋

    使用Post提交時須將空格轉(zhuǎn)換成加號的解釋

    參數(shù)有中包含空格且使用Post提交時須將空格轉(zhuǎn)換成加號,這樣后臺程序接受到的才是真正的空格,感興趣的朋友可以了解下
    2013-01-01

最新評論