當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootsrap基本应用

發布時間：2024/9/5 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootsrap基本应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Bootsrap

用法：

<!DOCTYPE html>

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

????????

????????<link href="css/bootstrap.min.css" rel="stylesheet">

????????

????????<link href="css/your-style.css" rel="stylesheet"> ???????

????????

????????<!--[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>

????????

????????

????????<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

????????

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

實例：

內容

</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”來實現；

效果：

在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中除了默認的按鈕風格還有其他六種風格，功能相同，不同在于按鈕的背景顏色，邊框顏色和文本顏色；

代碼如下：

效果：

按鈕大小：

在bootstrap中對按鈕的大小也可以定制，通過在基礎按鈕.btn的基礎上追加類名來定制按鈕大小

代碼：

效果：

按鈕活動狀態：

針對按鈕的狀態小果果主要分為2種，活動狀態和禁用狀態

活動狀態主要包括懸浮狀態（hover）,點擊狀態（active）和焦點狀態（focus）

代碼：

效果：

禁用狀態：要禁用按鈕有兩種方法實現；

在標簽中添加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基本应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

Bootsrap