Bootstrap3全面介紹

Bootstrap 3 是 Twitter 推出的一款前端框架,它能讓我們快速開發出兼容不同設備的現代化 Web 應用。Bootstrap 3 將 HTML、CSS 和 JavaScript 組件強大地結合在一起,可以減輕我們的前端開發負擔,讓我們更好關注業務邏輯的實現。下面讓我們從多個方面來對 Bootstrap 3 做詳細的闡述。

一、基礎內容

Bootstrap 3 最基礎的內容為網格系統、排版樣式與預處理器等。

1、網格系統

Bootstrap 3 柵格系統基於類名 col-xs-*、col-sm-*、col-md-*、col-lg-* 。從名字上我們就能猜出,”xs” 表示小屏幕,”sm” 表示中屏幕,”md” 表示大屏幕,”lg” 表示超大屏幕,而 * 號指定該列占屏幕總列的百分比。


<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
  </div>
</div>

該示例代碼中,「container」為容器,寬度固定且居中,在其內部通過「row」類新建一行,再用「col-md-*」來決定每一列的佔比。

2、排版樣式

Bootstrap 3 中提供了很多的排版樣式,例如:Μarkdown 與區塊、表格、代碼等。使用這些樣式可以更加規範化和簡潔化你的代碼。下面給出一個表格的實例代碼:


<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

二、組件

Bootstrap 3 也內置了很多組件,例如:導航欄、麵包屑、下拉菜單,還有模態框等。使用這些組件可以讓你的網站變得更加生動有趣。

1、導航欄

Bootstrap 3 中的導航欄可以自適應不同的屏幕尺寸,無需複雜的 CSS 樣式,可直接在 HTML 基礎上完成。下面給出一個示例代碼:


<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#navbar"
        aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首頁</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">關於我們</a></li>
      </ul>
    </div>
  </div>
</nav>

2、模態框

模態框是 Bootstrap 3 中比較常見的組件,可以通過它彈出一個對話框,提示或讓用戶進行一些操作。


<div class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
          data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">
          標題
        </h4>
      </div>
      <div class="modal-body">
        內容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">關閉</button>
        <button type="button" class="btn btn-primary">
          提交
        </button>
      </div>
    </div>
  </div>
</div>

三、JavaScript 插件

Bootstrap 3 還提供了一些 JavaScript 插件,例如:輪播圖、模態框等。

1、輪播圖

Bootstrap 3 中的輪播組件很容易使用,只需要定義 3 個基本元素:<div class=”carousel-inner”>、<a class=”left carousel-control”>、<a class=”right carousel-control”>。


<div id="carousel-example-generic" class="carousel slide"
  data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic"
      data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x200"
        alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x200"
        alt="Second slide">
    </div>
  </div>
  <a class="left carousel-control"
    href="#carousel-example-generic"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control"
    href="#carousel-example-generic"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

2、類型·選擇器

Bootstrap 3 中還提供了一些類型選擇器,例如:日期 timepicker、下拉選擇框 selectpicker 等。


<input type="text" class="form-control timepicker"
  data-date-format="yyyy-mm-dd hh:ii" />

<select class="selectpicker form-control">
  <option value="1">選項1</option>
  <option value="2">選項2</option>
  <option value="3">選項3</option>
</select>
<script>
  $('.selectpicker').selectpicker();
</script>

綜上可知,Bootstrap 3 的強大和靈活性是其最突出的特點,總的來說,它的優點有:易用、響應式、兼容、擴展性強、內置組件和插件豐富、文檔詳盡,可以說 Bootstrap 3 是我們最好的前端開發幫手,相信在實際開發中,你也會對它愛不釋手。

原創文章,作者:VBLXC,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/368914.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
VBLXC的頭像VBLXC
上一篇 2025-04-12 13:00
下一篇 2025-04-12 13:00

相關推薦

  • Python應用程序的全面指南

    Python是一種功能強大而簡單易學的編程語言,適用於多種應用場景。本篇文章將從多個方面介紹Python如何應用於開發應用程序。 一、Web應用程序 目前,基於Python的Web…

    編程 2025-04-29
  • Python zscore函數全面解析

    本文將介紹什麼是zscore函數,它在數據分析中的作用以及如何使用Python實現zscore函數,為讀者提供全面的指導。 一、zscore函數的概念 zscore函數是一種用於標…

    編程 2025-04-29
  • 全面解讀數據屬性r/w

    數據屬性r/w是指數據屬性的可讀/可寫性,它在程序設計中扮演著非常重要的角色。下面我們從多個方面對數據屬性r/w進行詳細的闡述。 一、r/w的概念 數據屬性r/w即指數據屬性的可讀…

    編程 2025-04-29
  • Python計算機程序代碼全面介紹

    本文將從多個方面對Python計算機程序代碼進行詳細介紹,包括基礎語法、數據類型、控制語句、函數、模塊及面向對象編程等。 一、基礎語法 Python是一種解釋型、面向對象、動態數據…

    編程 2025-04-29
  • Matlab二值圖像全面解析

    本文將全面介紹Matlab二值圖像的相關知識,包括二值圖像的基本原理、如何對二值圖像進行處理、如何從二值圖像中提取信息等等。通過本文的學習,你將能夠掌握Matlab二值圖像的基本操…

    編程 2025-04-28
  • 瘋狂Python講義的全面掌握與實踐

    本文將從多個方面對瘋狂Python講義進行詳細的闡述,幫助讀者全面了解Python編程,掌握瘋狂Python講義的實現方法。 一、Python基礎語法 Python基礎語法是學習P…

    編程 2025-04-28
  • 全面解析Python中的Variable

    Variable是Python中常見的一個概念,是我們在編程中經常用到的一個變數類型。Python是一門強類型語言,即每個變數都有一個對應的類型,不能無限制地進行類型間轉換。在本篇…

    編程 2025-04-28
  • Zookeeper ACL 用戶 anyone 全面解析

    本文將從以下幾個方面對Zookeeper ACL中的用戶anyone進行全面的解析,並為讀者提供相關的示例代碼。 一、anyone 的作用是什麼? 在Zookeeper中,anyo…

    編程 2025-04-28
  • Switchlight的全面解析

    Switchlight是一個高效的輕量級Web框架,為開發者提供了簡單易用的API和豐富的工具,可以快速構建Web應用程序。在本文中,我們將從多個方面闡述Switchlight的特…

    編程 2025-04-28
  • Python合集符號全面解析

    Python是一門非常流行的編程語言,在其語法中有一些特殊的符號被稱作合集符號,這些符號在Python中起到非常重要的作用。本文將從多個方面對Python合集符號進行詳細闡述,幫助…

    編程 2025-04-28

發表回復

登錄後才能評論