【BootStrap】初步教程

[html]  view plain copy

 

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

 

一、BootStrap的下載

      Bootstrap 中文網 爲 Bootstrap 專門構建了本身的免費 CDN 加速服務。基於國內雲廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。便可以在不下載BootStrap的狀況下使用BootStrap。

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

 

二、在頁面中引用BootStrap

 

<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標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

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

<!--<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的時候，則引用本地的庫文件：

 

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

 

 

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

 

 

三、使用BootStrap爲咱們提供的樣式和效果

在頁面中咱們只須要引用BootStrap爲咱們寫好的類選擇器便可得到BootStrap的各類效果。好比：

(1)按鈕樣式：

 

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

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

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

 

 

其餘的就很少說了，以上示例來自BootStrap官網。

 

說明：以上示例來自http://bootstrap.kinghack.com/base-css.html，你們也能夠經過這個網站來學習BootStrap的使用。