bootstrap學習筆記(5)

来源:http://www.cnblogs.com/cby-love/archive/2016/04/29/5447180.html
-Advertisement-
Play Games

Bootstrap輸入框組 主要記住一個原則 創建輸入框的步驟 把首碼或尾碼元素放在一個帶有 class .input-group 的 <div> 中。 接著,在相同的 <div> 內,在 class 為 .input-group-addon 的 <span> 內放置額外的內容。 把該 <span> ...


Bootstrap輸入框組

主要記住一個原則 創建輸入框的步驟
  • 把首碼或尾碼元素放在一個帶有 class .input-group 的 <div> 中。
  • 接著,在相同的 <div> 內,在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
  • 把該 <span> 放置在 <input> 元素的前面或者後面。

麵包屑導航:

     麵包屑導航主要的屬性就是在ul或者li加上breadcrumb屬性。

分頁和翻頁:

     以下是製作分頁和翻頁的小例子:
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 下拉菜單(Dropdowns)</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
  <div>
  <ul class="pager" style="display:inline;float: left">
    <li><a href="#">Previous</a></li>
  </ul>
<ul class="pagination" style="display:inline;float: left">
  <li><a href="#">&laquo</a></li>
 <li class="active"><a href="#">1</a></li>
  <li class="disabled"><a href="#">2</a></li>
   <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
  <li><a href="#">&raquo</a></li>
</ul>
<ul class="pager" style="display:inline;float: left">
    <li><a href="#">Next</a></li>
  </ul>
  </div>
</body>
</html>

 

        
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初入前端。在學習上總會有很多問題。這次就網頁佈局來講講。 網頁佈局在現代已經不再是什麼難事,幾乎所有頁面都能做好一個能拿得出手的佈局,在現在招聘網站上也有好多要求什麼div+css佈局的,簡直不知所言。 前端不懂佈局就沒法繼續前了。那麼怎麼佈局呢。 細心一點就會發現,css裡面竟然沒有專門為佈局而設 ...
  • 無縫輪播圖: ...
  • 學習要點: 1.顏色表方案 2.度量單位 主講教師:李炎恢 本章主要探討 HTML5 中 CSS 顏色和度量單位等問題,包括顏色的選取方式、相對長度和絕對長度等。 一.顏色表方案 顏色的表現形式主要有三種方式:顏色名稱、十六進位代碼和十進位代碼。 p { color: red; } 解釋:這是將一個 ...
  • 學習要點: 1.選擇器總匯 2.基本選擇器 3.複合選擇器 4.偽元素選擇器 主講教師:李炎恢 本章主要探討 HTML5 中 CSS 選擇器,通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代,即 CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式,主要分為 ...
  • Atitit.隔行換色 變色 css3 結構性偽類選擇器 1.1. css3隔行換色擴展閱讀 1 1.2. 結構偽選擇器 1 1.3. jQuery 選擇器2 1.1. css3隔行換色擴展閱讀 原理就是利用結構偽類選擇器 .list_div tr:nth-of-type(odd){backgrou ...
  • Atitit.jpg png格式差別以及解決jpg圖片不顯示的問題 圖片在pc上可以顯示,在Android上不能,img以及背景都不能顯示。。 Psd文件不能保存為png格式,只能jpg 原來是jpg文件是cmyk格式的。To rbg then nonk 作者:: ★(attilax)>>> 綽號: ...
  • 效果體驗:http://hovertree.com/texiao/jqimg/1/效果圖:代碼如下: 源碼下載:http://hovertree.com/h/bjaf/ljn1fwka.htm 轉自:http://hovertree.com/h/bjaf/flurt6nt.htm 特效庫:http: ...
  • ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...