【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的使用。