標題

Bootstrap標題樣式進行了以下顯著的優化重置：

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

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

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

段落

• 強調

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

• 文本對齊

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

代碼

<code></code>//單行內聯代碼 <pre></pre>//多行塊代碼 # 注pre.pre-scrollable//控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條 <kbd></kbd>//用戶輸入代碼 復制代碼

表格

.table//基礎表格 .table-striped//斑馬線表格 .table-bordered//帶邊框的表格 .table-hover//鼠標懸停高亮的表格 .table-condensed//緊湊型表格 .table-responsive//響應式表格 復制代碼

表單

在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：

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

2 配合Bootstrap框架的網格系統。

form

form class="form-horizontal" role="form"> 復制代碼

form-group

<div class="form-group"> 復制代碼

col-sm-*

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

form-control

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

常用組合

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 復制代碼

表單按鈕

input[type=“submit”] input[type=“button”] input[type=“reset”] 復制代碼

按鈕

.btn btn-primary .btn btn-warning .btn btn-success .btn btn-danger .btn btn-info .btn btn-link .btn btn-inverse 復制代碼

網格系統

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

Bootstrap框架的網格系統工作原理如下：

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

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

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

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

• 通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距(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> 復制代碼

導航

• 基礎樣式

  ul.nav nav-tabs>li>a

• 膠囊型導航

  ul.nav nav-pills>li>a

• 垂直堆疊導航

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

• 自適應導航 ul.nav nav-tabs nav-justified>li>a

• 面包屑導航

  ul.breadcrumb>li>a

導航條

使用方法： 第一步：首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“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="##">網站首頁</a></li></ul> </div> 復制代碼

模態彈出框結構

內置組件

總結

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

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