[html]?view plaincopy

<span?style="font-family:?Arial,?Helvetica,?sans-serif;">最近剛剛接觸到BootStrap，在這里總結一下BootStrap的使用方法。</span>??

?

1、BootStrap的下載

? ? ? Bootstrap?中文網?為?Bootstrap?專門構建了自己的免費?CDN?加速服務。基于國內云廠商的?CDN?服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。即可以在不下載BootStrap的情況下使用BootStrap。

? BootStrap中文網網址：http://www.bootcss.com/

?

2、在頁面中引用BootStrap

?

[html]?view plaincopy

<meta?charset="utf-8">??

<meta?http-equiv="X-UA-Compatible"?content="IE=edge">??

<meta?name="viewport"?content="width=device-width,?initial-scale=1">??

<!--?上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！?-->??

[html]?view plaincopy

<link?rel="stylesheet"?href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">??

[html]?view plaincopy

<!--<script?src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>-->??

<!--?Include?all?compiled?plugins?(below),?or?include?individual?files?as?needed?-->??

<!--<script?src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">-->??

在沒有下載BootStrap的時候，引用BootStrap中文網為我們提供的css庫和js庫。當我們下載BootStrap的時候，則引用本地的庫文件：

?

[html]?view plaincopy

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

?

?

[html]?view plaincopy

<script?src="js/bootstrap.min.js"></script>?<!--?解壓后的本地文件?-->??

<!--?Include?all?compiled?plugins?(below),?or?include?individual?files?as?needed?-->??

<script?src="js/jquery-2.1.4.min.js">??

?

?

3、使用BootStrap為我們提供的樣式和效果

在頁面中我們只需要引用BootStrap為我們寫好的類選擇器即可獲得BootStrap的各種效果。比如：

(1)按鈕樣式：

?

*按鈕的大小采用.btn-large,?.btn-small, 或?.btn-mini

通過添加.btn-block?創建塊級按鈕, 同時會填充整個父級的寬度

*按鈕的可用與否采用.disabled

?

?

其他的就不多說了，以上示例來自BootStrap官網。

?

說明：以上示例來自http://bootstrap.kinghack.com/base-css.html，大家也可以通過這個網站來學習BootStrap的使用。

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【BootStrap】初步教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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