當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

bootstrap回顾

發布時間：2025/7/14 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap回顾小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

（1）.Bootstrap?CSS 概覽

?Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。為了讓這些正常工作，您需要使用 HTML5 文檔類型（Doctype）

<!DOCTYPE html> <html> .... </html>

為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪制和觸屏縮放，需要在網頁的 head 之中添加?viewport meta?標簽，如下所示：

width?屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那么將它設置為?device-width?可以確保它能正確呈現在不同設備上。

initial-scale=1.0?確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。

在移動設備瀏覽器上，通過為?viewport meta?標簽添加?user-scalable=no?可以禁用其縮放（zooming）功能。

通常情況下，maximum-scale=1.0?與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。

避免跨瀏覽器的不一致

Bootstrap 使用?Normalize?來建立跨瀏覽器的一致性。

Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。

.container:before, .container:after {display: table;content: " "; }

:before?偽元素防止上邊距崩塌，:after?偽元素清除浮動。

如果?conteneditable?屬性出現在 HTML 中，由于一些 Opera bug，圍繞上述元素創建一個空格。這可以通過使用?content: " "?來修復。

（2）.Bootstrap?網格系統

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

Bootstrap 網格系統（Grid System）的工作原理

網格系統通過一系列包含內容的行和列來創建頁面布局。下面列出了 Bootstrap 網格系統是如何工作的：

行必須放置在?.container?class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如?.row?和?.col-xs-4，可用于快速創建網格布局。LESS 混合類可用于更多語義布局。
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過?.rows?上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個?.col-xs-4。
媒體查詢
/* 超小設備（手機，小于 768px） */ /* Bootstrap 中默認情況下沒有媒體查詢 *//* 小型設備（平板電腦，768px 起） */ @media (min-width: @screen-sm-min) { ... }/* 中型設備（臺式電腦，992px 起） */ @media (min-width: @screen-md-min) { ... }/* 大型設備（大臺式電腦，1200px 起） */ @media (min-width: @screen-lg-min) { ... }

網格選項

超小設備手機（<768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）大型設備臺式電腦 ? （≥1200px）

網格行為	一直是水平的	以折疊開始，斷點以上是水平的	以折疊開始，斷點以上是水平的	以折疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數量和	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）	30px （一個列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

偏移列

.col-md-offset-*?類。這些類會把一個列的左外邊距（margin）增加?*?列，其中?*范圍是從?1?到?11。

<div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div>

嵌套列

為了在內容中嵌套默認的網格，請添加一個新的?.row，并在一個已有的?.col-md-*?列內添加一組?.col-md-*?列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須占滿12列）\

列排序

Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然后以另一種順序顯示列。

您可以很輕易地改變帶有?.col-md-push-*?和?.col-md-pull-*?類的內置網格列的順序，其中?*?范圍是從?1?到?11。

在下面的實例中，我們有兩列布局，左列很窄，作為側邊欄。我們將使用?.col-md-push-*?和?.col-md-pull-*?類來互換這兩列的順序。

（3）.Bootstrap?排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認的字體棧。

使用 Bootstrap 的排版特性，您可以創建標題、段落、列表及其他內聯元素。

如果需要向任何標題添加一個內聯子標題，只需要簡單地在元素兩旁添加 <small>，或者添加?.small?class，這樣子您就能得到一個字號更小的顏色更淺的文本

<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1> <h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>

我是標題1 h1.?我是副標題1 h1

我是標題2 h2.?我是副標題2 h2

為了給段落添加強調文本，則可以添加 class="lead"，這將得到更大更粗、行高更高的文本，如下面實例所示：

<h2>引導主體副本</h2> <p class="lead">這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。</p>

強調

Bootstrap 提供了一些用于強調文本的類，如下面實例所示：

<small>本行內容是在標簽內</small><br> <strong>本行內容是在標簽內</strong><br> <em>本行內容是在標簽內，并呈現為斜體</em><br> <p class="text-left">向左對齊文本</p> <p class="text-center">居中對齊文本</p> <p class="text-right">向右對齊文本</p> <p class="text-muted">本行內容是減弱的</p> <p class="text-primary">本行內容帶有一個 primary class</p> <p class="text-success">本行內容帶有一個 success class</p> <p class="text-info">本行內容帶有一個 info class</p> <p class="text-warning">本行內容帶有一個 warning class</p> <p class="text-danger">本行內容帶有一個 danger class</p>

縮寫

HTML?元素提供了用于縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您為 <abbr> title 屬性添加了文本）。為了得到一個更小字體的文本，請添加 .initialism 到 <abbr>。

引用（Blockquote）

您可以在任意的 HTML 文本旁使用默認的 <blockquote>。其他選項包括，添加一個 <small> 標簽來標識引用的來源，使用 class?.pull-right?向右對齊引用。下面的實例演示了這些特性：

<cite> 標簽通常表示它所包含的文本對某個參考文獻的引用，比如書籍或者雜志的標題。

<blockquote>這是一個帶有源標題的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>

使用?multiple="multiple"?允許用戶選擇多個選項。

（4）.Bootstrap?響應式實用工具

Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。這些可以通過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。

超小屏幕
手機 (<768px)小屏幕
平板 (≥768px)中等屏幕
桌面 (≥992px)大屏幕
桌面 (≥1200px)

.visible-xs-*	可見	隱藏	隱藏	隱藏
.visible-sm-*	隱藏	可見	隱藏	隱藏
.visible-md-*	隱藏	隱藏	可見	隱藏
.visible-lg-*	隱藏	隱藏	隱藏	可見
.hidden-xs	隱藏	可見	可見	可見
.hidden-sm	可見	隱藏	可見	可見
.hidden-md	可見	可見	隱藏	可見
.hidden-lg	可見	可見	可見	隱藏

（5）.

（6）.

（7）.

（8）.

（9）.

（10）.

（11）.

（12）.

轉載于:https://my.oschina.net/ochmdlc/blog/840298

總結

以上是生活随笔為你收集整理的bootstrap回顾的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

bootstrap