BootStrap

時間 2019-11-08

原文原文鏈接

bootstrap下載：

英文網址：http://getbootstrap.com/ 中文網址：http://v3.bootcss.com/

選擇編譯壓縮版本，可下載到本地使用，也可網上引用CDN

bootstrap應用 - `CDN引入:`

引用框架（基礎）與注意點：

<!DOCTYPE html>
 <html lang="zh-CN">
 	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		**上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後!**
		<title>Bootstrap應用簡介</title>
	
		<!-- Bootstrap css引用-->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
<body>
	<h1>你好，世界！</h1>
	<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    **在引用bootstrap.min.js前需先引用jquery.js**
    <!-- Bootstrap js引用-->
	<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap學習

文中帶 . 的標號爲`class`選擇器，如.lead爲class ="lead";

第一部分：Bootstrap - 標籤屬性

1.全局樣式style.css:

移除body的margin聲明；
body的背景色爲白色；
爲排版設置了基本的字體、字號和行高
設置全局連接顏色，且當連接處於懸浮（hover）狀態時纔會顯示下劃線

2.標題h1~h6樣式：

margin-top、margin-bottom:h1~h3重置後是20px,h4~h6爲10px;
line-height:默認爲字體大小的1.1倍，文本顏色和字體都繼承父級元素
字體大小：h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px;

3.強調內容：

.lead通常配合段落標籤使用，最好配合strong標籤css
small多配合h標題系列標籤使用，做爲副標題html
strong、b加粗效果的標籤jquery
em、i、var、cite斜體效果的標籤bootstrap

強調相關的類：瀏覽器

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

4.文本對齊風格：

text-left：左對齊
text-center：居中對齊
text-right：右對齊
text-justify：兩端對齊

5.列表：

.list-unstyled:去除序列,ul下li的無序排列和ol下li的有序排列；框架
.list-inline：垂直列表換成水平列表形式顯示；ide

.dl-horizontal:水平定義列表效果，當屏寬大於768px的時候，才適用；佈局

<dl class="dl-horizontal">
  	<dt>我是定義列表標籤</dt>
  	<dd>我是定義列表闡述</dd>	
  </dl>

6.code和pre

code:通常是針對單個單詞或單行句子的代碼，效果：標紅、背景色、突出效果；
pre:通常是針對多行句子的代碼，須要在標籤上添加.pre-scrollable,控制代碼塊的最大高度爲340px;超出部分顯示滾動條；
code和pre代碼中出現<或>一概用&lt,&gt代替。

第二部分：Bootstrap - 表格table

只加.table：給表格設定了margin-bottom:20px以及設置單元內距；在thead底部設置2px的淺灰實線，每一個單元格設置1px的淺灰實線post

附加樣式表格：學習

.table-striped：斑馬線表格

  .table-bordered：帶邊框的表格

  .table-hover：鼠標懸停高亮的表格

  .table-condensed：緊湊型表格

響應式表格：.table-responsive table父級div的類名，特性：支持響應式佈局，當瀏覽器寬度小於768px時表格下端出現可視的滾動條

<!--實例代碼-->

  <div class="table-responsive">
  	<table class="table table-bordered table-hover ">
  		<thead>
  			<tr>
  				<th>標題1</th>
  				<th>標題2</th>
  				<th>標題3</th>
  			</tr>
  		</thead>
  		<tbody>
  			<tr>
  				<td>內容1</td>
  				<td>內容2</td>
  				<td>內容3</td>
  			</tr>
  			<tr>
  				<td>內容1</td>
  				<td>內容2</td>
  				<td>內容3</td>
  			</tr>
  			<tr>
  				<td>內容1</td>
  				<td>內容2</td>
  				<td>內容3</td>
  			</tr>
  		</tbody>
  	</table>
  </div>

第三部分：Bootstrap-圖片和圖標

1.圖片：使用方法很是簡單，只需在img標籤內設相應的類名

img-responsive：響應式圖片，主要針對響應式設計；
img-rounded:圓角圖片；
img-circle: border-radius:50%；

img-thumbnail:縮略圖片；

舉例(img-responsive：響應式，img-circle：border-radius:50%)：
  <img class="img-responsive img-circle" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/		u=1084883328,2041867738&fm=21&gp=0.jpg" alt=""/>

2.圖標：使用方法也很簡單，任何行級標籤均可以，一般用span標籤進行添加

圖片網址：http://getbootstrap.com/components/#glyphicons
引入方式：<span class="glyphicon-search"></span>

第四部分：Bootstrap-form表單

form自帶屬性：a: (action爲提交的地址) b: (method:提交的方式 get-顯性/post-隱性) c:role(h5的屬性，加強語意) 添加屬性：.form-horizontal（表單水平排列，配合網格系統使用）.form-inline(內聯表單)

1.input:(多使用.form-control類):習慣配合lable使用，外部設div(.form-group)

2.select:默認選擇一個選項，多使用form-control,多行選擇設置multiple

3.textarea:設置rows可定義其高度，設置cols能夠設置其寬度。但若是textarea元素中添加了類名「form-control」類名，則無需設置cols屬性

4.多選框(水平排列，lable加類.checkbox-inline)、單選框(水平排列，lable加類.radio-inline)

5.button:.btn .btn-default默認風格

<!-- form表單練習版 -->
<!-- container特色：margin-left:auto，margin-right:auto，左右15px的padding; -->
<div class="container">	
	<!-- page-header特色：padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee; -->
	<div class="page-header">
		<h2>註冊表單</h2>
	</div>
	<!-- action:提交的地方，method:提交的方式（get,post:隱性提交），role無特殊意義，加強語義 -->	
	<form action="" role="form">

	<!-- form-group有個margin-bottom=15px -->
		<div class="form-group">
			<label for="username" ><span class="glyphicon glyphicon-user">用戶名</span></label>
			<!-- form-control：寬度變成100%，border-radius爲4px,padding:6px 12px;shadow等屬性 -->
			<input class="form-control" type="text" id="username" placeholder="帳號" />
		</div>	
		<div class="form-group">
			<label for="password"><span class="glyphicon glyphicon-user">密碼</span></label>
			<input class="form-control"  type="password" id="password" placeholder="密碼" />
		</div>	
	
		<!-- checkbox:margin-top:10px,margin-bottom：10px; -->
		<div class="checkbox">
			
			<label for="remember" class="checkbox-inline" >
				<input  type="checkbox" id="remember" />記住我
			</label>

			<label for="remember" class="checkbox-inline" >
				<input  type="checkbox" id="remember" />周杰倫
			</label>
		</div>
		<div class="form-group">
			<!-- 第一個.btn爲定義button的基礎風格，.btn-success在.btn的基礎上進行了修改 -->
			<button class="btn btn-success" type="button" >提交</button>
		</div>			
	</form>
</div>

第五部分：Bootstrap-網格系統：

1.實現的原理：將容器劃分爲12等份，配合媒體查詢使用

2.工做原理：.container(容器類名) .row(行類名) 寬度多以中屏爲準：col -md（970） ,其餘col-lg-1（1170）,col-xs-1(自動),col-sm-1（750）

3.列偏移：.col-md-offset-1(加上此類的列元素，向右移動1個列的寬度)，注意總列數不超過12

4.列排序：col-md-push:向右偏移 col-md-pull:向左偏移

第六部分：Bootstrap-導航：

1.基礎樣式：.nav

2.標籤式導航(也稱選項卡導航)：.nav-tabs(),如有標籤默認選中，添加class="active"

3.自適應導航：.nav-justified 配合 .nav-tabs或者.nav-pills使用

4.麪包眉導航：ol添加類.breadcrumb

5.膠囊形(pills)導航

膠囊形（pills）導航聽起來有點彆扭，由於其外形看起來有點像膠囊形狀。但其更像咱們平時看到的大衆形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和「nav-tabs」相似，一樣的結構，只須要把類名'nav-tabs'換成'nav-pills'便可
	<ul class='nav nav-pills'>
	      <li class='active'><a href='##'>Home</a></li>
	      <li><a href='##'>CSS3</a></li>
	      <li><a href='##'>Sass</a></li>
	      <li><a href='##'>jQuery</a></li>
	      <li class=「disabled」><a href='##'>Responsive</a></li>
	</ul>

6. 垂直堆疊的導航

在實際運用當中，除了水平導航以外，還有垂直導航，就相似前面介紹的垂直排列按鈕同樣。製做垂直堆疊導航只須要在'nav-pills'的基礎	上添加一個'nav-stacked'類名便可
<ul class='nav nav-pills nav-stacked'>
     <li class='active'><a href='##'>Home</a></li>
     <li><a href='##'>CSS3</a></li>
     <li><a href='##'>Sass</a></li>
     <li><a href='##'>jQuery</a></li>
     <li class='disabled'><a href='##'>Responsive</a></li>
</ul>

在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具備這樣的效果，只須要添加在導航項之間添加「<li 	class=」nav-divider」></li>」便可

第七部分：Bootstrap-下拉菜單：

1.使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素

<div class="dropdown"></div>

2.使用了一個`button`按鈕作爲父菜單，而且定義類名'dropdown-toggle'和自定義'data-toggle'屬性，且值必須和最外容器類名一致

<button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown'>
下拉菜單
    <span class='caret'></span>
  </button>

3.下拉菜單項使用一個ul列表，而且定義一個類名爲'dropdown-menu'

<ul class=「dropdown-menu」>

4.Bootstrap框架中下拉菜單默認是左對齊，若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名

5.給li添加dropdown-header類;-- 給li添加dropdown-divider類; -- li添加.active; -- li添加.disabled;

6.導航菜單<div class=「ban-group」>

<div class=「btn-group」>
	<button class=「btn btn-default」 type=「button」>首頁</button>
	<button class=「btn btn-default」 type=「button」>產品展現</button>
	<button class=「btn btn-default」 type=「button」>案例分析</button>
	<button class=「btn btn-default」 type=「button」>聯繫咱們</button>
	<div class=「btn-group」>
		<button class=「btnbtn-default dropdown-toggle」 data-toggle=「dropdown」 type=「button」>關於咱們<span 			class=「caret」></span></button>
		 <ul class=「dropdown-menu」>
     		<li><a href=「##」>公司簡介</a></li>
     		<li><a href=「##」>企業文化</a></li>
     		<li><a href=「##」>組織結構</a></li>
     		<li><a href=「##」>客服服務</a></li>
		</ul>
  </div>

</div> ###### 7.垂直分組：把水平分組的「ban-group」類名換成「ban-group-vertical」便可 ###### 8.等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也很是的簡單，只須要在按鈕組「btn-group」上追加一個「btn-group-justified」類名,每組按鈕都要加上btn-group的類