當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

bootstrap 全局 CSS 样式

發(fā)布時(shí)間：2025/7/14 CSS 76 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap 全局 CSS 样式小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

http://v3.bootcss.com/css/#less-mixins-utility

深入了解 Bootstrap 底層結(jié)構(gòu)的關(guān)鍵部分，包括我們讓 web 開發(fā)變得更好、更快、更強(qiáng)壯的最佳實(shí)踐。

HTML5 文檔類型

Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設(shè)置為 HTML5 文檔類型。在你項(xiàng)目中的每個(gè)頁面都要參照下面的格式進(jìn)行設(shè)置。

復(fù)制 <!DOCTYPE html> <html lang="zh-CN"> ... </html>

移動(dòng)設(shè)備優(yōu)先

在 Bootstrap 2 中，我們對(duì)框架中的某些關(guān)鍵部分增加了對(duì)移動(dòng)設(shè)備友好的樣式。而在 Bootstrap 3 中，我們重寫了整個(gè)框架，使其一開始就是對(duì)移動(dòng)設(shè)備友好的。這次不是簡單的增加一些可選的針對(duì)移動(dòng)設(shè)備的樣式，而是直接融合進(jìn)了框架的內(nèi)核中。也就是說，Bootstrap 是移動(dòng)設(shè)備優(yōu)先的。針對(duì)移動(dòng)設(shè)備的樣式融合進(jìn)了框架的每個(gè)角落，而不是增加一個(gè)額外的文件。

為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在?<head>?之中添加 viewport 元數(shù)據(jù)標(biāo)簽。

復(fù)制 <meta name="viewport" content="width=device-width, initial-scale=1">

在移動(dòng)設(shè)備瀏覽器上，通過為視口（viewport）設(shè)置 meta 屬性為?user-scalable=no?可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定！

復(fù)制 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版與鏈接

Bootstrap 排版、鏈接樣式設(shè)置了基本的全局樣式。分別是：

為?body?元素設(shè)置?background-color: #fff;
使用?@font-family-base、@font-size-base?和?@line-height-base?a變量作為排版的基本參數(shù)
為所有鏈接設(shè)置了基本顏色?@link-color?，并且當(dāng)鏈接處于?:hover?狀態(tài)時(shí)才添加下劃線

這些樣式都能在?scaffolding.less?文件中找到對(duì)應(yīng)的源碼。

Normalize.css

為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性，我們使用了?Normalize.css，這是由?Nicolas Gallagher?和?Jonathan Neal?維護(hù)的一個(gè)CSS 重置樣式庫。

布局容器

Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè)?.container?容器。我們提供了兩個(gè)作此用處的類。注意，由于?padding等屬性的原因，這兩種容器類不能互相嵌套。

.container?類用于固定寬度并支持響應(yīng)式布局的容器。

復(fù)制 <div class="container">... </div>

.container-fluid?類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

復(fù)制 <div class="container-fluid">... </div>

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。

簡介

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：

“行（row）”必須包含在?.container?（固定寬度）或?.container-fluid?（100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似?.row?和?.col-xs-4?這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
通過為“列（column）”設(shè)置?padding?屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為?.row?元素設(shè)置負(fù)值margin?從而抵消掉為?.container?元素設(shè)置的?padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負(fù)值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè)?.col-xs-4?來創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何?.col-md-*?柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何?.col-lg-*?不存在，也影響大屏幕設(shè)備。

通過研究后面的實(shí)例，可以將這些原理應(yīng)用到你的代碼中。

媒體查詢

在柵格系統(tǒng)中，我們?cè)?Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。

復(fù)制 /* 超小屏幕（手機(jī)，小于 768px） */ /* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） *//* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }

我們偶爾也會(huì)在媒體查詢代碼中包含?max-width?從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。

復(fù)制 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

柵格參數(shù)

通過下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。

?超小屏幕?手機(jī) (<768px)小屏幕?平板 (≥768px)中等屏幕?桌面顯示器 (≥992px)大屏幕?大桌面顯示器 (≥1200px)柵格系統(tǒng)行為.container?最大寬度類前綴列（column）數(shù)最大列（column）寬槽（gutter）寬可嵌套偏移（Offsets）列排序

總是水平排列	開始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧
None （自動(dòng)）	750px	970px	1170px
.col-xs-	.col-sm-	.col-md-	.col-lg-
12
自動(dòng)	~62px	~81px	~97px
30px （每列左右均有 15px）
是
是
是

實(shí)例：從堆疊到水平排列

使用單一的一組?.col-md-*?柵格類，就可以創(chuàng)建一個(gè)基本的柵格系統(tǒng)，在手機(jī)和平板設(shè)備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設(shè)備上變?yōu)樗脚帕小Ｋ小傲?#xff08;column）必須放在 ”?.row?內(nèi)。

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6 復(fù)制 <div class="row"><div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

實(shí)例：流式布局容器

將最外面的布局元素?.container?修改為?.container-fluid，就可以將固定寬度的柵格布局轉(zhuǎn)換為 100% 寬度的布局。

復(fù)制 <div class="container-fluid"><div class="row"> ... </div> </div>

實(shí)例：移動(dòng)設(shè)備和桌面屏幕

是否不希望在小屏幕設(shè)備上所有列都堆疊在一起？那就使用針對(duì)超小屏幕和中等屏幕設(shè)備所定義的類吧，即?.col-xs-*和?.col-md-*。請(qǐng)看下面的實(shí)例，研究一下這些是如何工作的。

.col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6 復(fù)制  <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>  <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>  <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>

實(shí)例：手機(jī)、平板、桌面

在上面案例的基礎(chǔ)上，通過使用針對(duì)平板設(shè)備的?.col-sm-*?類，我們來創(chuàng)建更加動(dòng)態(tài)和強(qiáng)大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 復(fù)制 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>  <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

實(shí)例：多余的列（column）將另起一行排列

如果在一個(gè)?.row?內(nèi)包含的列（column）大于12個(gè)，包含多余列（column）的元素將作為一個(gè)整體單元被另起一行排列。

.col-xs-9 .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-xs-6
Subsequent columns continue along the new line. 復(fù)制 <div class="row"><div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>

響應(yīng)式列重置

即便有上面給出的四組柵格class，你也不免會(huì)碰到一些問題，例如，在某些閾值時(shí)，某些列可能會(huì)出現(xiàn)比別的列高的情況。為了克服這一問題，建議聯(lián)合使用?.clearfix?和?響應(yīng)式工具類。

.col-xs-6 .col-sm-3?
Resize your viewport or check it out on your phone for an example. .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 復(fù)制 <div class="row"><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>

除了列在分界點(diǎn)清除響應(yīng)，您可能需要?重置偏移, 后推或前拉某個(gè)列。請(qǐng)看此柵格實(shí)例。

復(fù)制 <div class="row"><div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>

列偏移

使用?.col-md-offset-*?類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用?*?選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4?類將?.col-md-4?元素向右側(cè)偏移了4個(gè)列（column）的寬度。

.col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3 復(fù)制 <div class="row"><div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

嵌套列

為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過添加一個(gè)新的?.row?元素和一系列?.col-sm-*?元素到已經(jīng)存在的.col-sm-*?元素內(nèi)。被嵌套的行（row）所包含的列（column）的個(gè)數(shù)不能超過12（其實(shí)，沒有要求你必須占滿12列）。

Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6 復(fù)制 <div class="row"><div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>

列排序

通過使用?.col-md-push-*?和?.col-md-pull-*?類就可以很容易的改變列（column）的順序。

.col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9 復(fù)制 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>

Less mixin 和變量

除了用于快速布局的預(yù)定義柵格類，Bootstrap 還包含了一組 Less 變量和 mixin 用于幫你生成簡單、語義化的布局。

變量

通過變量來定義列數(shù)、槽（gutter）寬、媒體查詢閾值（用于確定合適讓列浮動(dòng)）。我們使用這些變量生成預(yù)定義的柵格類，如上所示，還有如下所示的定制 mixin。

復(fù)制 @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;

mixin

mixin 用來和柵格變量一同使用，為每個(gè)列（column）生成語義化的 CSS 代碼。

復(fù)制 // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } // Negative margin nested rows out to align the content of columns .row { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } } // Generate the extra small columns .make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small column offsets .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { @media

總結(jié)

以上是生活随笔為你收集整理的bootstrap 全局 CSS 样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： mysql 获取自增id的值的方法
下一篇：用 Parser Combinator