在项目中引入BootStrap框架

 1.配置过程：

（1）登录www.bootcss网站，下载bootStrap框架（选择用于生产环境的bootStrap）

（2）打开下载好的文件夹找到dist文件夹，打开看到有css,fonts和js三个文件夹。将其粘贴并复制到你的项目下。

 

 （3）直接引入

 

 （4）注意修改相应的目录

 

（5）使用bootstrap必须建立在jQuery（直接引入即可）的基础上；

 

（6）修改js的路径：

2.BootStrap栅格系统

（1）描述：栅格系统（grid  system）是bootStrap创建的一个用于页面构建的html布局系统，该系统通过提供的类名来将容器等分为12个结构，通过对容器的宽度进行指定来进行页面的快速构建。

（2）说明：<1> 响应式布局（一套代码，能够在不同的页面中有不同的加载效果）。

                    <2> 提供了很多预定义的类名，通过使用这些类名能够快速获得css样式。

（3）内容   <1> container：通过使用.container类名来定义一个栅格容器

                   <2> row：通过使用.row类名来定义一个栅格中的行容器。

                   <3> col-[screenStyle]-[percent]：通过使用复合类名来定义栅格行中的一个栅格大小。

3.构建一个栅格：

<style>	
.skybule{background-color:skybule;}
.pink{backgrould-color:pink;}
</style>
<div class=”container”>
  <div class=”row”>
  <div class=”col-md-8 skybule”></div>/*左8右4*/
     <h1>左面的栅格</h1>
<div class=”col-md-4 pink”></div>
   <h2>右面的栅格</h2>
</div>
 </div>

<style>
*{margin:0;padding:0;}
Header{
background:url(‘img/bg.png’) no-repeat;
background-size:100%;
padding-top:px;
padding-bottom:px;
text-align:center;
}
</style>

<header>
<div calss=”container”>
  <div class=”row”>
  <div class=”col-xs-12”>
     <a href=”#”>
  <img src=”img/logo.png”></img>
</a>
</div>
</div>
</div>
</header>

 

 点击插件的一个小实例：

 按钮点击下拉菜单脚本