深入理解bootstrap框架之入門準(zhǔn)備
一.bootstrap框架簡(jiǎn)介
Bootstrap是最流行的前端開發(fā)框架。
什么是框架：開發(fā)過程的半成品。
bootstrap具有以下重要特性：
（1）完整的CSS樣式插件
（2）豐富的預(yù)定義樣式表
（3）基于jQuery的插件集
（4）靈活的柵格系統(tǒng)
以下將簡(jiǎn)單介紹對(duì)bootstrap可能用到的知識(shí)進(jìn)行梳理。
二.新手入門
筆者使用版本是3.3.x
在bootstrap中文官網(wǎng)可以找到以下界面
本書采用預(yù)編譯的版本進(jìn)行學(xué)習(xí)
三. 文件結(jié)構(gòu)
生產(chǎn)環(huán)境使用bootstrap.min.css和bootstrap.min.js。除了font結(jié)構(gòu)之外，其他文件都可以隨意命名。
四. 標(biāo)準(zhǔn)模板
首先是在aptana搭建bootstrap環(huán)境。
ctrl+N新建web項(xiàng)目，選擇默認(rèn)項(xiàng)目，命名項(xiàng)目，定義位置，完成。
把下載好的文件夾dist重命名為bootstrap，復(fù)制粘貼到項(xiàng)目文件夾下。
<!DOCTYPE html> <html lang="zh-cn"> <head> <!--頁面編碼 --> <meta charset="UTF-8"> <!--低版本瀏覽器模擬渲染--> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--響應(yīng)式布局：UI布局和移動(dòng)設(shè)備一致，縮放大小為原始大小--> <!--也可以使用下列聲明： <meta name="viewport" content="width=device-width, initialscale= 1, maximumscale=1, user-scalable=no"> 意思是強(qiáng)制讓文檔寬度和設(shè)備寬度保持1：1，不允許用戶單擊放大瀏覽。注意content屬性要用逗號(hào)（或分號(hào)）隔開，不規(guī)范則失效 --> <meta name="viewport" content="width=deviece-width,initial-scale=1"> <!--支持國(guó)產(chǎn)瀏覽器的高速渲染--> <meta name="renderer" content="Webkit"> <!--在此進(jìn)行SEO設(shè)置：作者、關(guān)鍵詞、描述--> <meta name="author" content="djtao"> <meta name="keywords" content="djtao"> <meta name="description" content="djtao"> <title>bootstrap基礎(chǔ)模板</title> <!--bootstrap--> <!--以下兩個(gè)js插件用于在IE8及以下支持H5元素查詢的，如不用可移除 --> <!--[if lt IE 9]> <script src="scripts/html5.min.js"></script> <script src="scripts/respond.min.js"></script> <![endif]--> <!--bootstrap樣式文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <!--自定義樣式文件 --> <link rel="stylesheet" href="styles/css.css"> </head> <body> <!--基于jQuery的腳本文件 --> <script src="scripts/jquery.min.js"></script> <!-- bootstrap的jq插件 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!--自定義腳本文件 --> <script src="scripts/js.js"></script> </body> </html>
注意用順序，自己的樣式和腳本必須在后面。
網(wǎng)上引用cdn是
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" > <!-- Optional theme --> <link rel="stylesheet" > <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
五. CSS基本語法
1.優(yōu)先級(jí)
和原生CSS一樣。
#xxx>.xxx>xxx
2.選擇器
（1）屬性選擇器
（2）子選擇器
>號(hào)
（3）兄弟選擇器
臨近選擇器用+號(hào)表示，比如說在一個(gè)nav-ul-li結(jié)構(gòu)的導(dǎo)航條里，欲設(shè)置兩個(gè)li之間的外邊距。
nav>li+li{
margin-left:10px;
}
指定元素后邊的節(jié)點(diǎn)用~。比如說查找article元素內(nèi)h1后面所有的p元素
article h1~p{font-size:20px}
3. 偽類選擇器
bootstrap常用的偽類無外乎這幾個(gè)
4. display屬性
display很好用，但是不能亂用。
5.媒詢
媒詢是bootstrap響應(yīng)式布局核心的要素，但主要用到的還是min,max和and
@media(max-width: 767px){
/*在小于768像素的屏幕中，這里樣式生效*/
}
@media(max-width: 767px) and (max-width: 991px){
/*在768-991像素區(qū)間的屏幕中，這里樣式生效*/
}
@media(min-width: 1200px){
/*在大于等于1200像素的屏幕中，這里樣式生效*/
}
同理還可以用到高度。
6.相關(guān)JavaScript語法梳理
（1）與和或運(yùn)算符（&&，||）
（2）立即調(diào)用函數(shù)
推薦使用這個(gè)
(function(){
do somthing
}() )
表示馬上調(diào)用。
（3）原型
BT中的js插件，都是基于面向?qū)ο蟮姆椒▌?chuàng)建。
簡(jiǎn)單舉個(gè)栗子，定義加減法運(yùn)算
var decimalDigits = 2,
tax = 5;
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
//alert(add(1, 3));
改寫成一個(gè)加減計(jì)算函數(shù)對(duì)象
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};
然后，通過給Calculator對(duì)象的prototype屬性賦值對(duì)象字面量來設(shè)定Calculator對(duì)象的原型。
Calculator.prototype = {
add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));
7.jQuery知識(shí)梳理
（1）事件綁定
jQuery常用的綁定語法有on/off、bind/unbind。比如說
$('div').on(click,function(){...});
$('div').off(click,function(){...});
注：bind()函數(shù)是jQuery 1.7之前或更早版本采用的一個(gè)用來綁定事件處理程序的函數(shù)；on()函數(shù)是jQuery 1.7版本提供的首選的用來綁定事件處理程序的函數(shù)；從1.7版本的介紹以及參數(shù)描述來看，其實(shí)這兩個(gè)函數(shù)基本上用法一致，但可能在早期的版本中，bind()函數(shù)一次只能為標(biāo)簽對(duì)象綁定一個(gè)事件的處理程序，而on()函數(shù)則可以一次為多個(gè)不同的事件綁定處理程序。
在bootstrap方法中的綁定類似但是思想不同，
$(document).on('click.bs.carosel.data.api','div',function(){...})
利用的是冒泡的機(jī)制，選擇document的div。提高了性能。
（2）命名空間
調(diào)試時(shí)，事件后面加上一段字符串比如click.djtao，再用trigger方法觸發(fā)時(shí)，就不會(huì)影響原本的點(diǎn)擊事件。
（3）$.data()
搜集指定元素上所有以data為前綴的自定義屬性，合并為一個(gè)字面量。比如說：
<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="djtao"></div>
我要收集role的值
$('#abc').data('role')
如果不帶參數(shù)，則等于收集并聲明了一個(gè)json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'}
8.H5的輔助屬性
可以支持盲人等人群閱讀。通常以arial為前綴統(tǒng)稱arial屬性。
以上所述是小編給大家介紹的深入理解bootstrap框架之入門準(zhǔn)備，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06
博客園是程序員們比較喜歡的聚集地，很多人喜歡發(fā)發(fā)心得，一直都覺著挺好的，但最不滿意他的一點(diǎn)是，沒有返回到頂部的功能，好吧，我們自己來添。2015-01-01
基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area2010-08-08
jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)文字由下到上循環(huán)滾動(dòng)的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
網(wǎng)上查了好多用著都不行，自己搞定了：在包含iframe的頁面中加入以下腳本，基本思想是在iframe加載內(nèi)容后重新設(shè)置高度，下面代碼盡在IE6中用過，沒在其他瀏覽器中測(cè)試。2009-12-12
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見元素有效。2015-07-07
剛開始學(xué)jQuery，于是想試試學(xué)習(xí)效果，所以就做了個(gè)這個(gè)TextBox自動(dòng)完成條，練習(xí)練習(xí)。請(qǐng)牛人們別笑話。2009-07-07
這篇文章主要介紹了jQuery中可見性過濾選擇器的使用,文中分為不可見性選擇器和可見性選擇器來分別舉例講解,需要的朋友可以參考下2016-04-04
基于jquery的滾動(dòng)條滾動(dòng)固定div(附演示下載)
今天與大家分享一下我寫的一個(gè)滾動(dòng)條滾動(dòng)固定div的例子，現(xiàn)在很多地方都可以看到這樣的效果2012-10-10
jQuery設(shè)置和移除文本框默認(rèn)值的方法
這篇文章主要介紹了jQuery設(shè)置和移除文本框默認(rèn)值的方法,實(shí)例分析了jQuery操作文本框的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03