bootstrap基礎知識學習筆記
更新時間：2016年11月02日 15:35:52 作者：cdmamata
這篇文章主要針對bootstrap基礎知識為大家整理了詳細的學習筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下
在此就不做 bootstrap 的介紹了，近幾年 bootstrap 越來越流行，一點不亞于 js 中的 jquery。
以下為 bootstrap 3.3.5 學習中記錄的東西，方便查閱，作者使用的是 jsp ，跟 html 可能有稍許不同，請自行參考修改
【引用文件】
【頁面引用】
路徑請自行規(guī)劃
<script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> <!-- 未壓縮 --> <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> <script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> <!--[if lt IE 9]> <script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> <script src="<%=path%>/js-lib/html5/respond.min.js"></script> <![endif]-->
【標準模板】
<!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta lang="zh-CN"/> <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 模板</title> <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> <!-- 未壓縮 --> <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> <script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> <!--[if lt IE 9]> <script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> <script src="<%=path%>/js-lib/html5/respond.min.js"></script> <![endif]--> </head> <body> hello bootstrap! </body> </html>
【css選擇器優(yōu)先級】
依次為
style 屬性
id
class
元素標簽
【媒體查詢與 container 源碼】
該樣式利用媒體查詢，根據(jù)頁面寬度不同，展示不同
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
【12柵格系統(tǒng)】
.row: 一行
.col-md-*: * 為列號
.col-md-offset-*: 列向右移幾列的寬度
.col-md-push-*: 向右推（移動）幾列
.col-md-pull-*: 向左拉（移動）幾列
.clearfix visible-xs: 清除浮動，只在小型屏幕生效
【基礎組件5種顏色】
primary(重點藍)
success(成功綠)
info(信息藍)
warning(警告橙)
danger(危險紅)
【按鈕】
<button type="button" class="btn btn-primary">btn-primary</button> <button type="button" class="btn btn-success">btn-success</button>
按鈕大小分為以下幾個尺寸
xs: 超小
sm: 小型
缺省: 普通
lg: 大型
<button type="button" class="btn btn-primary btn-xs">btn-primary</button> <button type="button" class="btn btn-success btn-sm">btn-success</button> <button type="button" class="btn btn-success">btn-success</button> <button type="button" class="btn btn-success btn-lg">btn-success</button>
【進度條】
進度條需js進行進度變動
<div class="progress progress-striped active"> <div class="progress-bar" style="width: 45%;"> 45% Complete </div> </div>
【下拉框】
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 我的書籍 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javaScript:void(0)">JavaScript 編程精解</a> </li> <li> <a href="javaScript:void(0)">JavaScript 設計模式</a> </li> <li> <a href="javaScript:void(0)">JavaScript 啟示錄</a> </li> <li class="divider"></li> <li> <a href="javaScript:void(0)">深入理解 bootstrap3</a> </li> </ul> </div>
【選項卡】
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-toggle="tab" href="#home">首頁</a>
</li>
<li class="">
<a data-toggle="tab" href="#profile">個人資料</a>
</li>
<li class="dropdown">
<!-- 點擊 “我的書籍”， 彈出下拉帶錯 -->
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
我的書籍
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a data-toggle="tab" href="#dropdown1">javaScript 編程精解</a>
</li>
<li>
<a data-toggle="tab" href="#dropdown2">javaScript 設計模式</a>
</li>
<li>
<a data-toggle="tab" href="#dropdown3">javaScript 啟示錄</a>
</li>
<li>
<a data-toggle="tab" href="#dropdown4">深入理解 bootstrap</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="home" class="tab-pane fade active in">
<p>點擊 “首頁”顯示</p>
</div>
<div id="profile" class="tab-pane fade">
<p>點擊 “個人資料”顯示</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<p>點擊 “javaScript 編程精解” 顯示</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<p>點擊 “javaScript 設計模式” 顯示</p>
</div>
<div id="dropdown3" class="tab-pane fade">
<p>點擊 “javaScript 啟示錄” 顯示</p>
</div>
<div id="dropdown4" class="tab-pane fade">
<p>點擊 “深入理解 bootstrap3” 顯示</p>
</div>
</div>
data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home"
替代，效果相同，js 默認先檢測 data-target 屬性，如果沒有，再檢測 href 屬性，如果還沒有，則默認為父元素
【表格】
<table class="table table-striped table-bordered table-hover table-condensed"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
table-striped : 斑馬線
table-bordered : 邊框
table-hover : 懸浮
table-condensed : 表格緊湊
注意，斑馬線與 鼠標懸浮樣式，顏色與 白色很接近，所以可能會誤認為 table-striped 與 table-hover 沒有生效，不起作用，
如果需要明顯顯示，我們需要重寫樣式顏色
/** 斑馬線 **/
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #EFEFEF;
}
/** 懸浮 **/
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #DFE8F6;
}
【元素的隱藏與顯示】
【響應式導航條】
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- 無論是寬屏還是窄屏，navbar-brand 都會顯示 -->
<a class="navbar-brand" href="javaScript:void(0)">Brand</a>
<!-- .navbar-toggle 樣式用于 toggle 收縮的內(nèi)容， 即 nav-collapse collapse元素 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 屏幕寬度小于 768 時，該DIV 默認隱藏，(單機 icon-bar 圖標，可以再展開)， 大于768 時顯示 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="javaScript:void(0)">主頁</a>
</li>
<li>
<a href="javaScript:void(0)">作品</a>
</li>
<li class="dropdown">
<a href="javaScript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
下拉菜單
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="javaScript:void(0)">子菜單1</a>
</li>
<li>
<a href="javaScript:void(0)">子菜單2</a>
</li>
</ul>
</li>
<li>
<a href="javaScript:void(0)">圖書</a>
</li>
</ul>
</div>
</div>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript下string.format函數(shù)補充
在上一篇中，自謙懶人的咚鏘留言指出樓豬改寫的format函數(shù)在參數(shù)輸入11個后不起作用了2010-08-08
file模式訪問網(wǎng)頁時iframe高度自適應解決方案
最近做到iframe的高度自適應這個問題;發(fā)現(xiàn)自己做的網(wǎng)頁是通過file方式訪問的，將網(wǎng)頁代碼放到apache下通過http協(xié)議訪問，在iframe加載的時候調用如下js方法:果然網(wǎng)頁高度能夠自適應（對于其他方案應該也有效果，我沒有注意去嘗試）感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了JavaScript設計模式發(fā)布訂閱模式，發(fā)布訂閱設計模式是和觀察者設計模式基本上相同，但是他們兩個設計模式不同的是發(fā)布訂閱者擁有一個事件處理中心而觀察者并沒有2022-06-06
無循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù)，如何一步一步把循環(huán)從代碼中抽離掉2017-04-04
JavaScript中使用構造器創(chuàng)建對象無需new的情況說明
JS中創(chuàng)建對象可以直接使用直接量的方式，這里討論的是定義一個構造器(function)的情況2012-03-03
這篇文章主要為大家詳細介紹了原生js實現(xiàn)表格翻頁和跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
網(wǎng)站首頁圖片滾動顯示對于很多朋友都有很大的吸引,因為它可以帶來意想不到視覺沖擊效果，接下來本文也實現(xiàn)一下，感興趣的朋友可以參考下，或許對你學習js知識有所幫助2013-02-02
這篇文章主要介紹了ES6 迭代器與可迭代對象的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
picker為用戶提供了多個選擇,用戶選了其中一種,但仍是需要有東西去告訴后臺用戶選了什么,下面這篇文章主要給大家介紹了關于微信小程序picker選擇器獲取值的2種方法,需要的朋友可以參考下2023-03-03
本實例描述了如何用Javascript來控制和獲取文本框/文本域的鼠標光標位置，以下代碼兼容IE和Chrome，F(xiàn)irefox，大家參考使用吧2014-01-01