當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

【BootStrap】概述 CSS

發布時間：2023/12/10 CSS 40 豆豆

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

BootStrap

　　BootStrap由Twitter開發，基于HTML,CSS,JS，是一套前端框架。它的特點是對瀏覽器良好的支持（目前市面上所有流行瀏覽器都可以），兼容移動設備，以及響應式設計（響應式CSS自適應于各種設備）。

　　安裝BS可以到官方網站下載這個框架庫，http://getbootstrap.com/ 。上面有兩個類型的BS庫，一種是編譯好的一些文件（Download Bootstrap），另一種是一些源代碼（Download Source）。源代碼比較大，是讓人分析的，對于一般的使用，下載預編譯版本的即可。得到的預編譯庫的目錄結構如下

　　再得到庫之后就是如何在文檔中引用庫了，基本上要在html中的<head>標簽中引用bootstrap.min.css（BS樣式庫）,bootstrap.min.js（BS的JS插件庫）以及jQuery（因為BS的JS文件會用到很多jQuery內容），例如：

　　下面將照抄W3CSchool的內容，根據BS的CSS，布局和插件三方面來介紹BS的功能和使用

BootStrap CSS

■　　BS網格系統

　　網頁設計中可以用網格組織內容，使用戶在查看內容時更加井井有條。BS使用網格系統來統括HTML內容，使得內容管理更加便利，同時因為內容鋪展時有網格作為一個“容器”，所以可以讓自適應不同設備變得更加簡單。

　　BS的網格系統會根據屏幕以及視口（瀏覽器窗口大小）的變化而自動增刪網格，一個頁面最多可以被分成12列的網格來呈現，如下結構：

　　在利用BS的網格系統時，應該遵循：

行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
使用行來創建列的水平組。
內容應該放置在列內，且唯有列可以是行的直接子元素。
預定義的網格類，比如 .row 和 .col-xs-4，可用于快速創建網格布局。LESS 混合類可用于更多語義布局。
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。

　　基于以上的注意點，我們可以構建出的一個最簡單的網格布局是像下面這些代碼一樣的：

<div class="container"><div class="row"><div class="col-*-*">內容</div><div class="col-*-*">內容</div> </div><div class="row">...</div> </div> <div class="container">....

　　設置出一個.container類的元素后，相當劃定了一片居中且指定了最大寬度的區域。在這個容器中每設置一個.row就是新開啟一行。而在每一行中可以再以.col-xx-nn開啟一列。xx的取值可以是lg（表示large）,md（medium）和sm（small）。再在每個列區域中去設置內容。

　　關于col類名中lg,md,sm三種選項，分別指定了當前頁面布局在不同大小屏幕的設備上的布局方案。比如在我可以設置兩個div分別是class="col-sm-3 col-md-6 col-lg-9" ; class="col-sm-9 col-md-6 col-lg-3"這兩個列在不同的設備上顯示的布局也不同，在小型設備（如手機）上是25%/75%，在中型設備（如平板電腦）上是50%/50%，在大型設備上（臺式機）則是75%/25%。這主要是因為BS會根據當前設備（屏幕）大小的不同來查找帶有不同關鍵字的類名并應用。

　　以上就是BS網格系統的一些基礎用法，更加高級一點的用法還有：

　　列偏移

　　　　默認的所有行的第一個列元素都是從行最左邊開始算起的，如果不想讓它從最左邊開始算，方便的方法是搞一個空列出來放前面就好了。另外的一種方法是利用.col-xx-offset-nn的類來指出nn列的偏移。這個類的意思就是說，在這個元素的左邊有nn列的空列，是不填充的。實例：col-md-offset-3.

　　嵌套列

　　　　稍微復雜一些的網格就有嵌套的關系。BS中的一個列可以再嵌套若干個行然后每個行中再加上若干個列，這些列的nn給值基準不是以總頁面的12個列來，而是以當前所在列來的。比如：

■　　BS排版

　　所謂排版就是通過一些既存類來進行文字的格式細化。在BS中大部分細化都和原生HTML是一致的。比如<strong>標簽是強調，<em>是強調加斜體等等。只不過BS在CSS上修改了一些這些默認標簽的樣式。另一方面，BS也以類和新標簽的形式增加了許多新的文字格式的細化，其中，類也通常被用于<p>這類文本標簽中。BS的這些類和標簽有：

　　<small>　　使得文本變小變淡，如果在<h1>到<h6>這類標題標簽的內容中增加上<small>標簽的話，small中的內容會變成灰色且字號小一點的副標題的樣式

　　.text-left/center/right　　文本的居左居中居右對齊。順便一提，不只是文本元素而同樣適用于其他元素的對其方式是.pull-left/pull-right等

　　.text-muted/success/primary/info/warning/danger　　這些類使得文本斜體+附帶一定顏色（比如success是綠色的，而warning是土黃色，danger是紅色的）。通過這個類的CSS包裝來規定所有警告啦，錯誤啦，信息啦，成功啦等等提示信息的樣式

　　.text-justify/nowrap　　當時justify時可以使文本在屏幕寬度不夠時自動換行，而nowrap使得文本不換行。

　　.text-uppercase/lowercase/capitalize　　一目了然不用說了。。

　　<blockquote>　　開啟一個引用塊，就像知乎的引用那樣，會在整個塊左邊有一條線以表示這是引用的文字。

　　.list-unstyled/list-inline　　兩個關于<ul>元素的類，unstyled是指讓列表的項前面沒有那個小圓點小方塊之類的標識，而inline則是讓本來默認是豎直方向的列表轉為橫向排列

　　<dl>,<dt>,<dd>　　三者形成的是一個可為列表項添加描述的列表，不清楚是原來HTML中就有的還是BS后加的。總之記錄一下。結構是<dl><dt>Description1</dt><dd>item1</dd><dt>Description2</dt>...</dl>這種感覺。dl可以添加類dl-horizontal使得dl列表中描述和列表項組成一行行，多行排列而不是原先的一列放下所有內容的形式（可以測試看一下）

■　　BS中的代碼顯示

　　BS中對代碼的顯示做了一定的改善。在原生HTML中有<code>標簽來內聯地顯示代碼（什么是內聯參見HTML基礎知識那篇），但是內聯的話果然很不方便。而BS中把原生HTML中的<pre>元素給包裝成一個專門用來顯示代碼的容器（或者說用來顯示代碼很好。。這是程序員的傲慢嗎。。）因為<pre>會保留HTML代碼中的所有空格制表等。效果如下：

<pre><article><h1>Article Heading</h1></article> </pre>

　　效果：　　

■　　BS表格

　　BS中的表格，除了用到原生HTML中就有的<table>,<tr>,<th>,<td>,<caption>等標簽外還另加了<thead>和<tbody>標簽來區別表格頭和表格內容。在BS中一個典型的表格結構應該是這樣的：

<table><caption>Title</caption><thead><tr><th>Field1</th><th>Field2</th></tr></thead><tbody><tr><td>Content1</td><td>Content2</td></tr><tr>...</tr></tbody> </table>

　　th標簽在BS中只能在thead標簽內部使用，td則只能在tbody中使用。當然，以上這段代碼不涉及任何BS類，所以看上去和原生HTML寫出來的沒什么差別，因此有必要給各個標簽帶上類以期其進入BS的變化，

　　首先是<table>標簽的一些類：

　　.table　　這個類是指BS中的表格的基本樣式，比如寬度鋪平整個可用網格的寬度，加上分隔線，調整字號等等。

　　.table-striped　　條紋類表格，將用灰白間替的風格填充表格的各個行。

　　//這里需要注意的一點是，上述兩個類之間是互相獨立的，也就是說，如果想要得到一個鋪平網格（這樣比較好看）且條紋狀的表格的話就得寫<table class="table table-striped">，這種類中重復寫上好幾遍同一個詞的現象在BS中非常常見。就table標簽而言，這里所有的五個標簽可以聯合使用，即<table class="table table-striped table-hover table-bordered table-condensed">

　　.table-bordered　　為表格添加所有邊框

　　.table-hover　　把鼠標懸浮所在位置的那一行背景色設置為灰色的表格

　　.table-condensed　　使表格更加緊湊

　　然后是<tr>，<th>，<td>的一些類:

　　.active　　將懸浮的色設置為相關行或者單元格的背景色（通常配合JS來實時改變頁面）。active類并不是表格獨有，列表，按鈕，超鏈接等也都有active類

　　.success/info/warning/danger　　將相關顏色設置成相關行或者單元格的背景色。

■　　BS表單

　　在BS中，一個典型的表單結構應該是這樣的：

<body><form role="form"><div class="form-group"><label for="name">名稱</label><input type="text" class="form-control" id="name"placeholder="請輸入名稱"></div><div class="form-group"><label for="inputfile">文件輸入</label><input type="file" id="inputfile"><p class="help-block">這里是塊級幫助文本的實例。</p></div><div class="checkbox"><label><input type="checkbox" /> 請打勾</label></div><button type="submit" class="btn btn-default">提交</button></form> </body>

　　這段代碼中包括了一個文本輸入框部分，一個文件輸入部分，一個復選框部分和一個提交按鈕。與原生HTML表單不同之處，BS的表單基本樣式要求首先在最開始的<form>標簽中添加role="form"，在表單中聯系比較緊密的元素（比如輸入框和輸入框提示文字）可以用一個.form-group的div標簽包裹起來（復選框那里用的是.checkbox）以期BS為我們的表單各個元素間自動調整間距。對于input，textarea，select等元素我們需要添加.form-control類讓其成為BS的表單元素樣式而不是原來的那樣。

　　上面這段代碼的效果是

　　從表單的呈現形式的角度來說，這種默認的屬于垂直表單（連標簽文字都是在輸入框的上方），除此之外，BS還內置了內聯表單和水平表單兩種表單的呈現形式。

　　內聯表單：

　　　　所有表單元素水平排列且相左對齊，設置時應該為<form>標簽加上.form-inline類別。內聯表單需要注意的是，在默認情況下select,input這些元素的寬度都是100%，在內聯表單中，雖然BS會自動調整一下寬度，但是如果自己能指定一下元素的寬度就更好了。另外，內聯表單中的標簽會變得很微妙，因為內聯是以.form-group的div為單位的，標簽和輸入框等互相之間還是垂直的。可以在label中添加.sr-only類以期表單在內聯形態時隱藏標簽。

　　水平表單：

　　　　水平表單是指各個表單元素的提示文字和輸入部分呈水平分布，這是比較常見的表單形態。要使用水平表單時應該要向<form>添加.form-horizontal類。接著把想要在一行水平顯示的東西包裹在一個.form-group中，然后在相關的label的地方，添加.control-label類，并且為label添加一個col-xx-nn以指定提示文字的部分占整個.form-group的多少橫向空間。比如這樣一個實例：

　　效果：

　　下面將通過表單中常用的各種不同的元素（input,textarea,select,checkbox,radio等等）來分別介紹一下。

　　input

　　input是輸入的統稱，根據input的type屬性的不同，可以構造出很多輸入框類型。BS支持HTML5的所有input類型，包括text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

　　在input標簽中直接添加disabled如<input type="text" disabled>可以禁用輸入框，此時鼠標移到輸入框上后圖標也會變化。如果不想禁用，只想讓它只讀的話可以添加readonly屬性<input type="text" readonly>

　　如果想要在輸入框的前后再添加一些其他的文字或者按鈕可以參考BS組件的輸入框組，其要義是把輸入框包在一個.input-group里面之后再對輸入框進行修飾，比如在前后加上.input-group-addon之類的元素

　　textarea

　　textarea是多行輸入，BS的textarea自帶一個調節大小的插件，另外在初始化時可以設置textarea標簽的rows和cols屬性以指定本多行文本框是該以幾行幾列的形式出現

　　checkbox & radio

　　其實checkbox和radio從代碼上來說也屬于input，因為調用時是<input type="checkbox">這樣的。但是其和上述input不同的地方在于他們的調用形式不同于普通的input。這兩種選擇框的常見調用形式是，把type是checkbox或者radio的input標簽放在一個label標簽中，再用一個.checkbox或者.radio的div標簽把這個label標簽包裹起來。比如下面這樣一個實例：

<div class="checkbox"><label><input type="checkbox" value="">選項 1</label></div><div class="checkbox"><label><input type="checkbox" value="">選項 2</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1"value="option1" checked> 選項 1</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2"value="option2">選項 2 - 選擇它將會取消選擇選項 1</label></div>

　　其他值得一提的就是radio是有組的概念的，在BS中radio組的體現就是input的name屬性。只要是name屬性一樣的input的話就相當于是一個組，一個組內的所有radio只能有一個是被選中狀態的。

　　上面這段例子中給出的選項是垂直排列的，如果想要得到內聯的橫向排列的選項群的話，需要在每個選項的label標簽中加上.checkbox-inline(無論是checkbox還是radio都是checkbox-inline），然后從每個div中取出label，放到統一的一個div中去（div本身是塊級元素，肯定還是會垂直排列，所以要從div中取出來）。

　　select

　　select沒什么好說的。<select multiple>可以調用列表框，別忘了給select加上.form-control。

　　靜態控件

　　靜態控件就是純文本，相當于wx中的StaticText。比方說在原先是一個<input type="text">的地方，讓它固定顯示一段文本的話，就可以用<p class="form-control-static">文本</p>來得到一段靜態文本了

　　fieldset

　　fieldset是一個隸屬于form標簽的一級子標簽，其不代表任何會顯示出來的內容，但是是控制整個form可用禁用的標簽。一般把.form-group的div都寫在fieldset里面，當fieldset被添加了disabled屬性，成為<fieldset disabled>的話就可以使當前fieldset內所有form-group的可交互部件(包括input，select，textarea，button等等)都無法交互使用。

　　狀態校驗

　　在.form-group的div中再加上.has-success,.has-warning,.has-error這樣的類的話可以使整個form-group的著色都有所改變，可以用于表單提價時進行狀態校驗后的反應。另外，類似在type是text的這種輸入框中，如果驗證狀態完成后給輸入框右側加上一個圖標會顯得很友好。加入圖標就需要在這個輸入框所在的.form-group的div上加上一個has-feedback屬性，然后在這個div中新加上一個.form-control-feedback的圖標元素，常用BS插件的圖標的話就可以是<span class="glyphicon glyphicon-ok form-control-feedback"></span>。這個圖標元素通常可以跟在input后面，如果input出于一個.input-group的div中的話那么這個圖標可以跟在這整個.input-group的div后面。比如：

<div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group has-warning has-feedback"><label class="control-label" for="inputWarning2">Input with warning</label><input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status"><span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span><span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group has-error has-feedback"><label class="control-label" for="inputError2">Input with error</label><input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"><span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span><span id="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group has-success has-feedback"><label class="control-label" for="inputGroupSuccess1">Input group with success</label><div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"></div><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div>

　　效果:(代碼中提到的aria-describedby和aria-hidden是用于把網頁設置得對殘障人士更加友好）

?　　控件尺寸

　　對于表單中的控件，我們可以通過設置其網格的col-xx-nn屬性來控制控件的寬度。如果要調整高度，可以使用.input-lg , .input-md , .input-sm這三種類來實現。通常能夠控制高度的控件是像<select>，<input>這種。

■　　BS按鈕

　　BS提供的按鈕類不僅僅能用于<button>標簽，也可以用于<a>和<input>。但是從最佳實踐的角度說最好還是設置成<button>比較好。常見的一些按鈕的類：

　　.btn　　按鈕基本樣式，和之前的表格等一樣，不加這個的話按鈕任然表現為原生HTML的按鈕樣式。

　　.btn-default　　默認按鈕樣式。僅僅有.btn時按鈕是一塊灰色的區域，不好看，要進一步加上各種樣式，其中default就是默認的一種白底黑字的按鈕樣式。

　　.btn-success/info/warning/danger　　配色不同的按鈕

　　.btn-link　　可以讓一個按鈕表現的像一個超鏈接一樣，但其本質仍然是一個按鈕。

　　.btn-lg/sm/xs/block　　用來改變按鈕的默認大小。lg是大按鈕，sm小按鈕，xs極小按鈕，block是讓按鈕跨越父元素的總寬度，形成一個塊級按鈕。

　　.active　　為button標簽添加一個active類，使得按鈕變成被激活時的樣式:<button class="btn btn-default active">Button</button>

　　.disabled　　disabled屬性直接寫在button的標簽里（或者添加一個disabled="disabled"的屬性，兩種寫法是等價的），來禁用一個按鈕。被禁用的按鈕顏色變淺且鼠標圖標會變化：<button class="btn btn-default" disabled>Butotn</button>

■　　BS圖片

　　為img標簽添加一些類可以讓圖片在BS的支持下更加好看。常用的類有：

　　.img-rounded　　使圖片的邊框變為圓角邊框。

　　.img-circle　　使圖片變為圓形

　　.img-thumbnail　　給圖片增加一個帶有一些內邊距的灰色邊框，看上去就像是一個相框一樣。

　　.img-responsive　　讓圖片具有響應式的特征，即當窗口大小變化時，圖片會根據窗口大小調整自身大小以適應窗口。最大不會超過圖片本身大小。

　　順便一提，img標簽有個alt屬性，其作用是當鼠標移到圖片上時將會顯示一個內容是alt屬性值的tips，此外當該圖片加載失敗的時候，網頁上就會顯示alt的值加上一個紅叉叉。

■　　BS中其他一些輔助類

　　BS中還有很多很多類，by which可以設計出很優雅的網頁。

　　文本處理類

　　　　.text-muted/primary/info/danger/warning/success　　給文本著色，muted是淡灰色，primary是BS藍。。

　　背景處理類

　　　　.bg-primary/success/info/warning/danger　　給背景著色，可以用于各種各樣的元素標簽

　　位置處理類

　　　　.pull-left/right　　之前也提到過了這兩個類，其作用是把元素強制浮動到左邊or右邊

　　　　.center-block　　把元素設置成display:block并居中顯示

　　　　.clearfix　　清除浮動

　　顯示隱藏：

　　　　.show　　顯示元素

　　　　.hidden　　隱藏元素

　　　　.sr-only　　除了屏幕閱讀器，在其他設備上隱藏元素。具體什么是屏幕閱讀器不清楚。。總之PC和IPAD這類設備都不算。

　　其他

　　　　.close　　為button等元素添加close類之后，這個button就成為一個關閉按鈕樣式，無邊框，文字為淺灰色的樣子

　　　　.caret　　當button等元素有下拉菜單的功能，此時為button的內容中加上一個.caret的span元素可以使button的內容文字右邊有個小三角形，提示用戶此處可下拉菜單。

■　　響應式工具

　　因為BS會支持各種大小屏幕的設備，所以當你想要在某些設備上顯示而在其他設備上不顯示一些東西的時候可以通過響應式工具來實現。比如：

　　.visible-xs/sm/md/lg　　使得元素可以在極小/小/中/大型設備上看到

　　.hidden-xs/sm/md/lg　　使得元素無法在這些設備上看到。

　　順便，關于大中小設備的定義：

轉載于:https://www.cnblogs.com/franknihao/p/6804456.html

總結

以上是生活随笔為你收集整理的【BootStrap】概述 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： UVa 11324 最大团（强连通分量缩
下一篇： CSS 基本样式

CSS

【BootStrap】 概述 CSS

總結

【BootStrap】概述 CSS