標(biāo)題

Bootstrap標(biāo)題樣式進(jìn)行了以下顯著的優(yōu)化重置：

• 重新設(shè)置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。

• 所有標(biāo)題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。

• 固定不同級別標(biāo)題字體大小：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。small：font-size: 65%;

段落

• 強(qiáng)調(diào)

  .text-muted：提示，使用淺灰色（#999）.text-primary：主要，使用藍(lán)色（#428bca）.text-success：成功，使用淺綠色(#3c763d).text-info：通知信息，使用淺藍(lán)色（#31708f）.text-warning：警告，使用黃色（#8a6d3b）.text-danger：危險，使用褐色（#a94442） 復(fù)制代碼

• 文本對齊

  .text-left：左對齊.text-center：居中對齊.text-right：右對齊.text-justify：兩端對齊 復(fù)制代碼

代碼

<code></code>//單行內(nèi)聯(lián)代碼 <pre></pre>//多行塊代碼 # 注pre.pre-scrollable//控制代碼塊區(qū)域最大高度為340px，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條 <kbd></kbd>//用戶輸入代碼 復(fù)制代碼

表格

.table//基礎(chǔ)表格 .table-striped//斑馬線表格 .table-bordered//帶邊框的表格 .table-hover//鼠標(biāo)懸停高亮的表格 .table-condensed//緊湊型表格 .table-responsive//響應(yīng)式表格 復(fù)制代碼

表單

在Bootstrap框架中要實(shí)現(xiàn)水平表單效果，必須滿足以下兩個條件：

1 在<form>元素是使用類名“form-horizontal”。

2 配合Bootstrap框架的網(wǎng)格系統(tǒng)。

form

form class="form-horizontal" role="form"> 復(fù)制代碼

form-group

<div class="form-group"> 復(fù)制代碼

col-sm-*

<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> 復(fù)制代碼

form-control

<input type="email" class="form-control" placeholder="用戶名"> 復(fù)制代碼

常用組合

form.form-inline>div.form-group>label.col-sm-xx>input.form-control form[role='form']>div.form-group>select.form-control form[role='form']>div.form-group>textarea.form-control 復(fù)制代碼

表單按鈕

input[type=“submit”] input[type=“button”] input[type=“reset”] 復(fù)制代碼

按鈕

.btn btn-primary .btn btn-warning .btn btn-success .btn btn-danger .btn btn-info .btn btn-link .btn btn-inverse 復(fù)制代碼

網(wǎng)格系統(tǒng)

工作原理:div.container>div.row>div.col-md-x

Bootstrap框架的網(wǎng)格系統(tǒng)工作原理如下：

• 數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距(padding)

• 在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)，比如12。如：

  <div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div></div></div> 復(fù)制代碼

• 具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器(.row)的直接子元素

• 通過設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距（margin）來抵消內(nèi)距(padding)的影響

菜單按鈕

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 </button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul> </div> 復(fù)制代碼

導(dǎo)航

• 基礎(chǔ)樣式

  ul.nav nav-tabs>li>a

• 膠囊型導(dǎo)航

  ul.nav nav-pills>li>a

• 垂直堆疊導(dǎo)航

  ul.nav nav-tabs nav-stacked>li>a

• 自適應(yīng)導(dǎo)航 ul.nav nav-tabs nav-justified>li>a

• 面包屑導(dǎo)航

  ul.breadcrumb>li>a

導(dǎo)航條

使用方法： 第一步：首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav” 第二步：在列表外部添加一個容器（div），并且使用類名“navbar”和“navbar-default”

大概這個樣子 div.nav navbar-default>ul.nav navbar-nav>li.active>a

<div class="navbar navbar-default" role="navigation"><ul class="nav navbar-nav"><li class="active"><a href="##">網(wǎng)站首頁</a></li></ul> </div> 復(fù)制代碼

模態(tài)彈出框結(jié)構(gòu)

內(nèi)置組件

總結(jié)

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

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