Bootstrap,前端工程師比較常用的框架、插件,根據它的定義,我們不妨這樣理解,Bootstrap就是用於前端開發的一個模板,就是別人做好了我們直接可以搬過來直接使用或者根據自己需要略加修改設計自己的頁面效果的成品。所以更加准確說,我們更多的時候是去學習如何去使用Bootstrap,那么我們該如何學會更好的使用Bootstrap?下面是我個人在Bootstrap學習使用過程中得一些心得,在這兒跟大家分享,不足之處歡迎前輩們多多指教!
第一:在學習一個新的知識,我們首先的明白它是什么以及我們為什么要學習它,然后深入,理解它的一些概念性的知識,不必死記硬背,記住不是目的,透徹理解才是。
第二:下載Bootstrap,認真閱讀,深入學習Bootstrap里面的js和JQ的一些插件,動手實踐,加深印象。
第三:如何吧Bootstrap運用在自己的開發中,步驟:
1》第一步,構建一個基本HTML頁面,基本模板,可以在Bootstrap里面找到直接復制過來,EX:
<!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"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
說明
1)<meta name="viewport" content="width=device-width,initial-scale=1.0">
用來修復網頁在移動設備上顯示的問題
2)
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
這是對ie9之前等版本不支持HTML5的瀏覽器進行特殊的處理
4)在head中的bootstrap-responsive.css是非必須文件,可以不引入,這個文件的主要作用是做一個響應式的網頁。
5)在網頁中bootstrap.css是bootstrap中的樣式文件,bootstrap.js是腳本文件,兩個文件相互對應,引入的順序和位置一般是:CSS文件在head標簽中引入,js文件在body標簽里引入。其中jquery文件要在bootstrap腳本文件之前引入。
6)Bootstrap是基於HTML5網頁的,所以首先要建立一個HTML5類型的網頁
做完以上的操作就建好了一個基本的bootstrap網頁了,然后就可以在body里面使用bootstrap中定義好的各種好看的樣式。
簡要說明在Bootstrap中,網頁按照十二欄的布局分布,在div中通過span類可以定義該div塊占據多少欄,span1~span12可以選擇.
2》第二步:根據你的網頁需要,直接引入Bootstrap里面的CSS布局或JS插件,說白了就是把Bootstrap里面你需要的東西拷貝過來,根據具體需求決定直接使用或者進行修改。
