在项目中引入BootStrap框架

 1.配置过程:

(1)登录www.bootcss.com网站,下载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>

 

 点击插件的一个小实例:

 按钮点击下拉菜单脚本

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值