當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap的全局css样式部分

發(fā)布時(shí)間：2024/10/12 编程问答 30 豆豆

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

Bootstrap的柵格系統(tǒng)：

為了合適的排列與內(nèi)補(bǔ)，行（row）寫在.container或者.container-fluid中；

在手機(jī)上（超小屏幕<768px）:總是水平排列的， .container最大寬度自動(dòng)，類前綴是.col-xs-，最大列寬（column）自動(dòng)；

在平板上（小屏幕>=768px） :開始是堆疊，當(dāng)大于闕值是為水平排列；.container最大寬度750px；類前綴是.col-sm-；最大列寬62px；

在桌面顯示器上（中等屏幕>=992xp）:開始是堆疊，當(dāng)大于闕值是為水平排列；.container最大寬度970px；類前綴是.col-md-；最大列寬81px；

在大桌面顯示器（大屏幕>=1200px）:開始是堆疊，當(dāng)大于闕值是為水平排列；.container最大寬度1170px；類前綴是.col-lg-；最大列寬97px；

示例：

<div?class="row">

??<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><div?class="row">

??<div?class="col-md-6">.col-md-6</div>

??<div?class="col-md-6">.col-md-6</div></div>

當(dāng)大屏幕時(shí)：

當(dāng)小屏幕時(shí)：

流式布局：將最外面的包裹div類名.container修改為.container-fluid；就能將固定的柵格布局轉(zhuǎn)換為100%寬度布局；

使用.col-xs-和.col-md-；可以針對(duì)超小屏幕與中等屏幕設(shè)備不讓列堆疊在一起；

列偏移：

使用類名.col-md-offset-*可以將列向右偏移，通過*選擇器為當(dāng)前的元素增加了左邊距（margin）；

示例：

<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>

5.列排序：

使用類名.col-md-push-*和.col-md-pull-* 改變列（column）的順序；

示例：

<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>

排版：

除了正常的標(biāo)題標(biāo)簽h1--h6；還有類名.h1--.h6；樣式與標(biāo)題標(biāo)簽一致；

Bootstrap將全局font-size設(shè)置為14px，line-height設(shè)置為1.428；p標(biāo)簽還設(shè)置了10px的底部外邊距（margin）；可以添加類名.lead讓段落突出顯示；額外插入的文本使用標(biāo)簽<ins>;帶下劃線使用<u>標(biāo)簽；小號(hào)文本使用small標(biāo)簽，也可添加類名.small代替small標(biāo)簽；

使用類名.text-left與.text-center與.text-right與.text-justify與.text-nowrap將文字重新對(duì)齊；

示例：

<p?class="text-left">Left aligned text.</p>

<p?class="text-center">Center aligned text.</p>

<p?class="text-right">Right aligned text.</p>

<p?class="text-justify">Justified text.</p>

<p?class="text-nowrap">No wrap text.</p>

使用類名.text-lowercase與.text-uppercase與.text-capotalize改變文本的大小寫；

示例：

<p?class="text-lowercase">Lowercased text.</p>

<p?class="text-uppercase">Uppercased text.</p>

<p?class="text-capitalize">Capitalized text.</p>

縮略語：使用標(biāo)簽abbr可以設(shè)置把鼠標(biāo)懸停在縮略語上顯示完整內(nèi)容；需要為abbr設(shè)置title屬性；首字母縮略語：添加類名.initialism ，可以讓font-size變得稍微小一些；

列表：添加類名.dl-horizontal可以讓標(biāo)題與描述排列在一行；

示例：

<dl?class="dl-horizontal">

??<dt>...</dt>

??<dd>...</dd>

</dl>

表格：

為表格標(biāo)簽添加類名.table可以為其賦予基本的樣式，例如少量的padding和水平方向的分割線；

通過添加類名.table-striped可以給tbody標(biāo)簽之內(nèi)的每行添加斑馬條紋樣式；但是這個(gè)功能不支持ie8；

示例：

</table>

添加類名.table-bordered可以給表格和其中的每個(gè)單元格添加邊框；

示例：

添加類名.table-hover可以讓每一行對(duì)鼠標(biāo)懸停狀態(tài)做出響應(yīng)；

添加類名.table-condensed可以讓表格更加緊湊，單元格中的內(nèi)部padding均會(huì)減半；

2.狀態(tài)類

通過添加類名為行或單元格添加顏色；

.active：鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色；

.success：標(biāo)示成功或積極的動(dòng)作；

.info：標(biāo)示普通的提示信息或動(dòng)作；

.warning;標(biāo)示警告或需要用戶注意；

.danger；標(biāo)示危險(xiǎn)或潛在的帶來負(fù)面影響的動(dòng)作；

3.響應(yīng)式表格；

將表格.table元素包裹在.table-responsive元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，會(huì)在小屏幕上（小于768px）水平滾動(dòng)，當(dāng)屏幕大于768px寬度時(shí)，水平滾動(dòng)條消失；

表單：

1.所有設(shè)置了.form-control類的input，textarea和select元素都將有默認(rèn)屬性寬為100%;

將lable元素和前面提到的控件包裹在.form-ground中可以獲得最好的排列；

示例：

<form?role="form">

??<div?class="form-group">

????<label?for="exampleInputEmail1">Email address</label>

????<input?type="email"?class="form-control"?id="exampleInputEmail1"?placeholder="Enter email">

??</div>

??<div?class="form-group">

????<label?for="exampleInputPassword1">Password</label>

????<input?type="password"?class="form-control"?id="exampleInputPassword1"?placeholder="Password">

??</div>

??<div?class="form-group">

????<label?for="exampleInputFile">File input</label>

????<input?type="file"?id="exampleInputFile">

????<p?class="help-block">Example block-level help text here.</p>

??</div>

??<div?class="checkbox">

????<label>

??????<input?type="checkbox">?Check me out

????</label>

??</div>

??<button?type="submit"?class="btn btn-default">Submit</button></form>

內(nèi)聯(lián)表單：

為form元素添加.form-inline類可以使其內(nèi)容左對(duì)齊并且表現(xiàn)為inline-block級(jí)別的控件，但是只適用于（viewport）至少在768px寬度時(shí)（寬度在小會(huì)使表單折疊）；

需要手動(dòng)設(shè)置寬度：在內(nèi)聯(lián)表單將輸入框和單選/多選框控件默認(rèn)寬度設(shè)置為width：auto，因此，多個(gè)控件可以排列在同一行。根據(jù)需求可能需要一些額外的定制優(yōu)化組件；

一定要添加lable標(biāo)簽：如果不加屏幕閱讀器將無法識(shí)別，對(duì)于內(nèi)聯(lián)表單，可通過lable設(shè)置

.sr-only類隱藏；

示例：

<form?class="form-inline"?role="form">

??<div?class="form-group">

????<label?class="sr-only"?for="exampleInputEmail2">Email address</label>

????<input?type="email"?class="form-control"?id="exampleInputEmail2"?placeholder="Enter email">

??</div>

??<div?class="form-group">

????<div?class="input-group">

??????<div?class="input-group-addon">@</div>

??????<input?class="form-control"?type="email"?placeholder="Enter email">

????</div>

??</div>

??<div?class="form-group">

????<label?class="sr-only"?for="exampleInputPassword2">Password</label>

????<input?type="password"?class="form-control"?id="exampleInputPassword2"?placeholder="Password">

??</div>

??<div?class="checkbox">

????<label>

??????<input?type="checkbox">?Remember me

????</label>

??</div>

??<button?type="submit"?class="btn btn-default">Sign in</button></form>

水平列表的表單：

為表單添加類名.form-horizontal，；

示例：

<form?class="form-horizontal"?role="form">

??<div?class="form-group">

????<label?for="inputEmail3"?class="col-sm-2 control-label">Email</label>

????<div?class="col-sm-10">

??????<input?type="email"?class="form-control"?id="inputEmail3"?placeholder="Email">

????</div>

??</div>

??<div?class="form-group">

????<label?for="inputPassword3"?class="col-sm-2 control-label">Password</label>

????<div?class="col-sm-10">

??????<input?type="password"?class="form-control"?id="inputPassword3"?placeholder="Password">

????</div>

??</div>

??<div?class="form-group">

????<div?class="col-sm-offset-2 col-sm-10">

??????<div?class="checkbox">

????????<label>

??????????<input?type="checkbox">?Remember me

????????</label>

??????</div>

????</div>

??</div>

??<div?class="form-group">

????<div?class="col-sm-offset-2 col-sm-10">

??????<button?type="submit"?class="btn btn-default">Sign in</button>

????</div>

??</div></form>

如果需要在表單中將一行純文本和label元素放置于同一行，為p元素添加.form-control-staticl類；

為輸入框輸入disabled屬性可以防止用戶輸入，并能對(duì)外觀做一些修改，使其更直觀；

<input?class="form-control"?id="disabledInput"?type="text"?placeholder="Disabled input here..."?disabled>

被禁用的fieldset：

為fieldset設(shè)置disabled屬性，可以禁用包含的所有控件；（但是a標(biāo)簽的連接功能不受影響）；

<form?role="form">

??<fieldset?disabled>

????<div?class="form-group">

??????<label?for="disabledTextInput">Disabled input</label>

??????<input?type="text"?id="disabledTextInput"?class="form-control"?placeholder="Disabled input">

????</div>

????<div?class="form-group">

??????<label?for="disabledSelect">Disabled select menu</label>

??????<select?id="disabledSelect"?class="form-control">

????????<option>Disabled select</option>

??????</select>

????</div>

????<div?class="checkbox">

??????<label>

????????<input?type="checkbox">?Can't check this

??????</label>

????</div>

????<button?type="submit"?class="btn btn-primary">Submit</button>

??</fieldset></form>

為輸入框設(shè)置readonly屬性可以禁止用戶輸入，并且輸入框的樣式也是禁用狀態(tài)；

<input?class="form-control"?type="text"?placeholder="Readonly input here…"?readonly>

控制尺寸：

通過.input-lg類似的類可以為控件設(shè)置高度，通過.col-lg-*類似的類可以為控件設(shè)置寬度；

<input?class="form-control input-lg"?type="text"?placeholder=".input-lg">

<input?class="form-control"?type="text"?placeholder="Default input">

<input?class="form-control input-sm"?type="text"?placeholder=".input-sm">

<select?class="form-control input-lg">...</select><select?class="form-control">...</select>

<select?class="form-control input-sm">...</select>

調(diào)整列（column）尺寸：

用柵格系統(tǒng)中的列包裹輸入框或其任何父元素，都能設(shè)置寬度；

??<div class="col-xs-2">

????<input type="text" class="form-control" placeholder=".col-xs-2">

??</div>

??<div class="col-xs-3">

????<input type="text" class="form-control" placeholder=".col-xs-3">

??</div>

??<div class="col-xs-4">

????<input type="text" class="form-control" placeholder=".col-xs-4">

??</div>

</div>

按鈕：

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

我們可以同過類名：.btn-lg，.btn-sm或.btn-xs獲得不同尺寸的按鈕；

禁用狀態(tài)

通過為按鈕的背景設(shè)置 opacity 屬性就可以呈現(xiàn)出無法點(diǎn)擊的效果。

button 元素

為 <button> 元素添加 disabled 屬性，使其表現(xiàn)出禁用狀態(tài)。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Ps:當(dāng)ie9及更低版本中按鈕會(huì)是灰色并帶有陰影，目前無法解決；

圖片：

響應(yīng)式圖片：

添加類名.img-responsive可以讓圖片支持響應(yīng)式布局；

Ps：

在 Internet Explorer 8-10 中，設(shè)置為 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。為了解決這個(gè)問題，在出問題的地方添加 width: 100% \9; 即可。Bootstrap 并沒有自動(dòng)為所有圖像元素設(shè)置這一屬性，因?yàn)檫@會(huì)導(dǎo)致其他圖像格式出現(xiàn)錯(cuò)亂。

改變圖片形狀：

快速浮動(dòng)：

向左浮動(dòng)或向右浮動(dòng)需要添加類名pull-left或pull-right

<div?class="pull-left">...</div>

<div?class="pull-right">...</div>

轉(zhuǎn)載于:https://www.cnblogs.com/daheblog/p/6198351.html

總結(jié)

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

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

上一篇：如何用山药煮甜汤？
下一篇： 1，字符是否为空，2，比较两个字符大小。