首页 > 代码库 > Bootstrap入门及其常用内置实现
Bootstrap入门及其常用内置实现
BootStrap是一个专门做页面的
1.BS是基于HTML CSS JS 的一个前端框架(半成品)
2.预定义了一套CSS样式与JQurey实现
3.BS和Validation类似，都是JQ的插件，需要与与之配对的JQuery版本一起使用
4.BS内置了一些实现，也可以进行自定义实现，现在学习前者
BootStrap重要特点：
1.可以实现响应式布局(在不同大小的屏幕中显示处不同的状态)
BootStrap使用准备：
1.导入与之匹配的JQ
2.将dist目录下的三个文件夹复制进当前项目(这三个文件夹必须平级)（内置实现）
BootStrap模板：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
/*这三个标签必须这head标签之后，其它所有标签之前*/
<link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet">
<script src="http://www.mamicode.com/js/jquery-1.11.3.min.js"></script>
<script src="http://www.mamicode.com/js/bootstrap.js"></script>
/*引入BS内置的CSS，引入JQuery，引入BS的JS文件*/
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
/*浏览器兼容，在IE9以下浏览器使用这个框架时需要使用*/
BootStrap布局：
1.容器：
方式1：使用 class = "container"
效果：一般情况(pc机)左右有留白，移动设备左右无留白
方式2：使用class = "container-fluid"
左右无留白
2.栅格
A：行 ：class="row"
B：列：class="col-xx-单元列数"
BS中默认将一行分成12个单元列，我们要指定自己的单元格时，必须要指定它所占的单元列数
注意：
A：一行中所有的单元格总列数相加可以小于12，剩余的部分是空白
B：一行中所有的单元格总列数相加大于12时，大于的部分换行排列
C：栅格化布局时，采用比已设置屏幕更小的屏幕所有列都占一行的原则(如果不设置的话)
3.BootStrap的布局都是通过class属性来定位div标签所在的位置来对页面进行布局
4.BS中的class实现
使用BS时，要实现某些功能，基本都是通过指定class实现的，BS中的class值都是固定的，类似于关键字可以被
BS识别，BS中的css文件有关于class的相关实现（.class{CSS样式实现}）
响应式布局：
1.实现机制：
超小屏幕-------手机---------xs
小屏幕---------ipad mini-------sm
中等屏幕--------ipad----------md
大屏幕---------pc---------lg
2.代码体现
不同设备上显示不同效果，布局上通过class指定
class="col-屏幕代号-单元列数" (要设置多种中间加空格)
特点：小屏优先
大屏幕指定列数了，但是比其小的屏幕是换行实现
小屏幕指定列数了，比其大的屏幕没有指定时，按照小屏的划分显示
显示与隐藏设置：
显示：visible-屏幕代号
隐藏：hidden-屏幕代号
特点：默认的是全部显示，如果设置了特定屏幕显示或隐藏，其它没有设置的则取反
布局偏移：
1.设置空的div占位
2.偏移量：<div class="col-xs-8 col-xs-offset-4 text-center">
BS中的计时器：（轮播图）
js代码：
$(function(){
$(‘.carousel‘).carousel({
interval:时间值
});
});
轮播图开始标签中：
data-interval="时间值"
BS中的按钮：
<button type="button" class="btn btn-关键字">显示字样</button>
BS中设置悬浮在页面之上的元素（导航条）：
<div class="container" data-spy="affix" data-offset-top="60" data-offset-bottom="200" id="daohang">
然后在css代码中定位该元素，将其置于页面之上：
#daohang {
/*显示在上面*/
z-index: 1;
top:0px;
left:0px;
right:0px;
}
BS中的胶囊条：
1.先查找导航实现，编写胶囊导航条
2.通过CSS设置它的位置
3.单击导航条定位到某个位置
A:href="http://www.mamicode.com/#id值"
B:页面中的实现模块都有id值
href中的id值和页面模块的id值一一对应
4.body添加属性，定位添加css样式（因为是一直在页面中显示）
代码实现：<body data-spy="scroll" data-target="#jiaonang">
<div class="container" id="jiaonang">
<ul class="nav nav-pills nav-stacked" >
<li class="active"><a href="http://www.mamicode.com/#top">顶部</a></li>
<li><a href="http://www.mamicode.com/#lunbo">轮播图</a></li>
<li><a href="http://www.mamicode.com/#remen">热门商品</a></li>
</ul>
</div>
...
<style>
#jiaonang{
z-index:1;
width:100px;
position:fixed;(定义其在页面中的绝对位置)
top:100px;
left:50px;
}
body {
position:relative;
}
</style>
Bootstrap入门及其常用内置实现