Bootsrap基本应用
Bootsrap
用法：
<!DOCTYPE html>
<html lang="en">
????<head>
????????<meta charset="utf-8">
????????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????????<meta name="viewport" content="width=device-width, initial-scale=1">
????????<title>Bootstrap的HTML標準模板</title> ??
????????<!-- Bootstrap -->
????????<link href="css/bootstrap.min.css" rel="stylesheet">
????????<!--你自己的樣式文件 -->
????????<link href="css/your-style.css" rel="stylesheet"> ???????
????????<!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
????????<!--[if lt IE 9]>
????????<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
????????<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
????????<![endif]-->
????</head>
????<body>
????????<h1>Hello, world!</h1>
????????
????????<!-- 如果要使用Bootstrap的js插件，必須先調入jQuery -->
????????<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
????????<!-- 包括所有bootstrap的js插件或者可以根據需要使用的js插件調用 -->
????????<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
????</body>
</html>
?
?
標題樣式：
Bootstrap中可以通過class名實現h1-h6比如：<div class="h1">Bootstrap標題</div>
?
在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題：
<h1>Bootstrap標題<small>我是副標題</small></h1>
?
.lead ??：增大文本字號，加粗；
給文本添加顏色，通過顏色來強調：
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）
?
文本對其：在CSS中常常使用text-align來實現文本對其，bootstrap中：
Text-left ??左對齊
Text-center 居中對齊
Text-right ??右對齊
Text-justify ?兩端對齊
?
Bootstrap提供了一套響應式移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
?
通過class來 操作在相應的屏幕上的布局
手機屏幕（<768px）?類前綴.col-xs-
平板屏幕（>=768px）類前綴.col-sm-
中等屏幕（>=992px）類前綴.col-md-
大屏幕 ?（>=1200px)類前綴.col-lg-
列數都為12；所有的列（column）必須放在 .row內
<div class=”row”>
<div class=“col-xs-12 ?clo-md-8 ?clo-md-6 ?col-lg-4”>
<div class=“col-xs-12 ?clo-md-4 ?clo-md-6 ?col-lg-4”>
</div>
?
實例：
<div class=”container”>
<div class=”row”>
內容
</div>
</div>
將最外層的布局元素 .container修改為 .container-fluid ?就可以將固定寬度的柵格布局轉換成100%寬度的布局
偏移：
有時候我們不希望相鄰的列緊挨在一起，可以用列偏移（offset）來實現 ?給要偏移的元素加 .col-md-offset-* ??（*號代表需要偏移的列數）
例如：“col-md-offset-4”就是在中等屏幕的時候向右偏移4列
?
列排序：
列排序就是改變列表的方向，就是改變左右浮動，并且設置浮動的距離，通過添加類名實現：
“col-md-push-*”和”col-md-pull-*”（*號代表偏移列數）
向右偏移寫push ??向左寫pull；
?
列的嵌套：
Bootstrap框架還支持列的嵌套
你可以在列中添加一個或者多個行（rom），然后在這個容器中插入列（像前面的一樣）
嵌套的列 ?在寫.col-md-* ?的時候是按照父盒子的基礎上 再進行分配
?
圖標：
Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。
如<span class=”glypicon glyphicon-search”></span>
效果：
?
?
?
按鈕：Bootstrap中按鈕通過類名“btn”來實現；
<button class=”btn”>基本按鈕</button>
效果：
?
?
在bottstrap中還可以使用在其他標簽元素上，需要在標簽元素上添加類名“btn”
<input type="submit" class="btn btn-default" value="input標簽按鈕"/>
<div class="btn btn-default">div標簽按鈕</div>
<span class="btn btn-default">span標簽按鈕</span>
?
?
按鈕風格：
Bootstap中除了默認的按鈕風格還有其他六種風格，功能相同，不同在于按鈕的背景顏色，邊框顏色和文本顏色；
代碼如下：
<button class="btn btn-default">默認按鈕</button>
<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-success">成功按鈕</button>
<button class="btn btn-warning">警告按鈕</button>
<button class="btn btn-danger">危險按鈕</button>
<button class="btn btn-link">鏈接按鈕</button>
效果：
?
按鈕大小：
在bootstrap中對按鈕的大小也可以定制，通過在基礎按鈕.btn的基礎上追加類名來定制按鈕大小
代碼：
<button class="btn btn-primary btn-lg">大型按鈕</button>
<button class="btn btn-primary ">正常按鈕</button>
<button class="btn btn-primary btn-sm">小型按鈕</button>
<button class="btn btn-primary btn-xs">微型按鈕</button>
效果：
?
按鈕活動狀態：
針對按鈕的狀態小果果主要分為2種，活動狀態和禁用狀態
活動狀態主要包括懸浮狀態（hover）,點擊狀態（active）和焦點狀態（focus）
代碼：
<button class="btn btn-default active">點擊狀態</button>
<button class="btn btn-primary focus">焦點狀態</button>
<button class="btn btn-success hover">懸浮狀態</button>
效果：
?
禁用狀態：要禁用按鈕有兩種方法實現；
在標簽中添加disabled屬性；
在元素標簽中添加類名”disabled”
代碼：
<button class="btn btn-primary " disabled="disabled">通過disabled屬性禁用按鈕</button>
<button class="btn btn-primary disabled">通過添加類名disabled禁用按鈕</button>
<button class="btn btn-primary ">未禁用的按鈕</button>
效果：
?
?
轉載于:https://www.cnblogs.com/cx698038/p/6197066.html
總結
以上是生活随笔為你收集整理的Bootsrap基本应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用循环计算斐波那契数列
- 下一篇： 循环队列解决约瑟夫问题