Bootstrap框架快速上手攻略

前言

概念

1.选择器

.xx  类选择器
#xx  id选择器
xxx  标签选择器

2.缩写
div  division 划分,图层
ul unordered lists 无序列表
ol ordered lists 有序列表
li list item 列表项目

3.视口

Viewport是指手机端可见窗口(去掉浏览器导航栏,菜单栏后的窗口)。在添加视口代码前，设备会按照桌面电脑分辨率去渲染整个页面，然后再按照比例显示到手机上。添加视口后，会强制按照手机屏幕分辨率渲染页面。

第一章 基础及布局

一.栅格系统

定义:一系列的行和列构建的布局,随着屏幕放大,最多展示12个列
1.容器
固定布局 div class = container 居中容器
流式布局 div class = container-fluid 横全屏容器

2.行与列
a.行
div class = row

b.列 class = col-
第一列 div class=col-lg-3 (每个占3列) n=3
第二列 div class=col-lg-3
第三列 div class=col-lg-3
第四列 div class=col-lg-3
网页显示就是4列了.
col * n = 12

c.栅格参数:
 col-lg-3: lg large-->当屏幕大于1200px时采用 电脑
 col-md-3: md middle-->992~1200px
 col-sm-3: sm small-->768~992px             平板
 col-xs-3: xs extremely small-->小于768px 手机
 
d.多屏适配写法:

<div class="col-lg-3 col-sm-4 col-xs-6"></div>

二.辅助类

文本颜色,及背景,有助于统一整体样式
文本:class = text-

    <h1 class="text-primary">主要</h1>
    <h1 class="text-success">成功</h1>
    <h1 class="text-warning">警告</h1>
    <h1 class="text-danger">危险</h1>
    <h1 class="text-info">信息</h1>
    <h1 class="text-muted">暗哑</h1>

背景:class = bg-  

    <h1 class="bg-primary">主要</h1>
    <h1 class="bg-success">成功</h1>
    <h1 class="bg-warning">警告</h1>
    <h1 class="bg-danger">危险</h1>
    <h1 class="bg-info">信息</h1>
    <h1 class="bg-muted">暗哑</h1>

关闭按钮图标 class = close

    <button class="close"><span>×</span></button>
    <input class="close" type="button" value="关闭">

三角图标^ class = caret

<span class="caret"></span>

快速浮动 div,class = pull-left ,pull-right 浮动会将块元素转化为行内元素!!

补充:

行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列-->不管多少内容,始终占满一行
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行-->有多少内容占多少空间

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

4.行内元素转换为块级元素
display:block (字面意思表现形式设为块级)如果不想让父元素收到快速浮动的影响,要给父元素加上:class = clearfix

居中：

块元素居中 div,class = center-block 
文字居中div,class = text-center
垂直居中 自定义样式!

 <style>
	#div1{
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
</style>

举例：
<div id="div1" class="center-block text-center" style="width: 500px;border: 1px solid red;">
    块元素居中
</div>
translate(-50%,-50%):元素自己的50%大小,向左平移,向上平移
显示和隐藏 div,class = visible-lg


表格 table,class = table （响应式表格）
只需要增加table类,即可实现表格美化效果
1.斑马线 class = table-striped
2.鼠标悬停变色 class = table-hover
3.边框 class = table-bordered
4.颜色 active success warning danger info 注意:此处没有primary
如:tr,class = danger

表格内垂直居中 
class = vertical-align:middle

三.列表

<ul></ul>
ul,class = list-group      列表
li,class = list-group-item 列表每一项

<span class="badge"></span> 徽章

li,class = list-group-item-success/danger/warning 列表每一项颜色

四.表单

1.垂直样式表单(默认):form 或 form-vertical
<lable for="xxx"></lable> for和id一定做要关联

表单分组:class = form-group 
表单项:class = form-control placeholder="请输入用户名"
复选框:div class = checkbox
单选框:div class = radio
下拉列表:select class = form-control
圆角:style border-radius: 10px;

五.按钮

1.<button type="submit" class="btn btn-primary">提交</button>

class = 
btn 按钮
btn-primary/success/... 按钮颜色 
btn-block 按钮占满一行


2.水平样式表单
a.给form增加一个form-horizontal类

谷歌浏览器F12可以临时修改样式.

表单补充:
校验状态
成功:has-success
失败:has-error

第二章 JavaScript组件

添加额外图标
1.在form-group对应的标签里增加 has-feedback类
2.在input输入框的后面,创建图标 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
*图片类属性名去bootstrap中文网复制名称使用:has-feedback


六.图片:
响应式图片 class="img-responsive"


图片的形状 
圆角图片 img-rounded
圆形的图片 img-circle
缩略图 img-thumbnail


超链接缩略图 a,class = thumbnail


七.按钮
1.三种方式创建按钮
1.
<button type="button" class="btn btn-primary">button按钮1</button>
2.
<input type="button" class="btn btn-success" value="input按钮">
3.
<a href="#" class="btn btn-danger">a按钮</a>


2.
样式 class = btn
颜色 class = btn-primary/success/danger/...
尺寸 
大  btn-lg
中  btn-sm
小  btn-xs
block块级按钮  btn-block 占满整个一行


3.按钮组 class = btn-group


4.激活状态和禁用状态
激活:active
禁用:disabled


八.下拉菜单 class = dropdown-menu
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">php</a> </li>
<li><a href="#">java</a> </li>
<li><a href="#">js</a> </li>
<li><a href="#">android</a> </li>
</ul>
</div>


步骤:
1.将ul列表转换为下拉菜单: 增加dropdown-menu类
2.给button增加dropdown-toggle类 , 实现点击按钮时,让菜单显示:
data-toggle = "dropdown"






九.输入框组 class = input-group
给输入框的两侧增加按钮或元素


1.按钮  class="input-group-btn"
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入">
<div class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>


<div class="input-group">
<input class="form-control" placeholder="请输入">
<span class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>


2.元素 class="input-group-addon"
<div class="container">
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" placeholder="请输入" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
</div>




十.导航 class = nav 
ul
1.nav nav-tabs 普通导航
2.nav nav-pills 胶囊式导航
3.nav nav-stacked 堆叠式导航
4.nav nav-justify 平铺式导航


li
激活状态 class = active




十一.导航条 class = navbar
导航条高度=50px
<nav class="navbar navbar-primary navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">阿比巴斯</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品介绍</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
    <form role="form" class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </form>


    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品介绍</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</nav>


步骤:
1.创建导航条:
<nav class="navbar navbar-inverse"></nav>
2.第一个元素及品牌:
<div class="nav navbar-header">
<a class="navbar-brand">阿比巴斯</a>
</div>
3.头元素后的导航
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
</ul>
4.导航条内的表单
 <form role="form" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入">
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
navbar-left : 左浮动
5.右侧导航区域
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
navbar-right : 右浮动


十二.面包屑导航 class = breadcrumb


十三.分页
1.普通分页 class = pagination
2.居中分页 class = pager


十四.警告框 class = alert alert-danger/warning/...


十五.面板 class = panel
嵌套表格的面板
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">这是面板的标题</h1>
</div>
<div class="panel-body">
这是面板的内容
</div>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</div>




十六.字体图标 class = ...官网找类的属性名
图标也可以嵌套在按钮里面






十七.模态框(弹窗)
1.创建按钮,点击显示模态框


2.创建模态狂,默认是隐藏的
 <div class="container">
       <button class="btn btn-primary">
           弹出模态框
       </button>
        <br>
        <br>
        <br>
       模态框
       <div class="modal" role="dialog">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">这是模态框标题</h4>
                       <button class="close">&times;</button>
                   </div>
                   <div class="modal-body">
                       这里是模态框的内容
                   </div>
                   <div class="modal-footer">
                       <button class="btn btn-default">关闭</button>
                       <button class="btn btn-default">保存修改</button>
                   </div>
               </div>
           </div>
       </div>
   </div>
   
3.实现点击按钮的时候,让模态框显示出来,有2种方法
方法1:通过data-属性实现
<div class="container">
       <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> data属性!
           弹出模态框
       </button>
        <br>
        <br>
        <br>
       模态框
       <div class="modal" role="dialog" id="myModal"> 给出id!
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">
                           这是模态框标题
                           <button class="close">&times;</button>
                       </h4>
                   </div>
                   <div class="modal-body">
                       这里是模态框的内容
                   </div>
                   <div class="modal-footer">
                       <button class="btn btn-default">关闭</button>
                       <button class="btn btn-default">保存修改</button>
                   </div>
               </div>
           </div>
       </div>
   </div>
   如何实现,点击X号关闭模态框:给button增加data-dismiss属性
  <button class="close" data-dismiss="modal">&times;</button>
   
   
方法2:通过javascript实现
1.点击按钮,给按钮绑定一个点击事件
2.点击背景幕时,不让模态框隐藏
3.将模态框的内容写到外部文件中,然后再加载进来
   <div class="container">
       <button class="btn btn-primary" id="openModal">
           弹出模态框
       </button>
        <br>
        <br>
        <br>
       模态框
       <div class="modal" role="dialog" id="myModal">
           <div class="modal-dialog" role="document">
               <div class="modal-content">


               </div>
           </div>
       </div>
   </div>
    <script>
        //表示当整个页面加载完毕后执行
        $(function(){
            $('#openModal').click(function(){
                //show方法:显示
                //$('#myModal').modal('show');


                //用到Json
                $('#myModal').modal({
                    backdrop:'static',  //表示点击背景幕的时候模态框不消失
                    keyboard:true,      //按esc键也消失
                    show:true,          //一上来就显示
                    remote:'10.2.2.remote.html'  //表示加载外部内容进来
                });
            })


            //监视id=openModel的事件-show  on表示监听
            $('#myModal').on('show.bs.modal',function(){
                alert('模态框要展示出来了!');
            })


            //监视id=openModel的事件-shown  on表示监听
            $('#myModal').on('shown.bs.modal',function(){
                alert('模态框已经展示出来了!');
            })


            //监视id=openModel的事件-hide  on表示监听
            $('#myModal').on('hide.bs.modal',function(){
                alert('模态框要隐藏了!');
            })


            //监视id=openModel的事件-hidden  on表示监听
            $('#myModal').on('hidden.bs.modal',function(){
                alert('模态框已经隐藏了!');
            })
        })
    </script>



外部文件:
<div class="modal-header">
<h4 class="modal-title">
这是模态框标题
<button class="close" data-dismiss="modal">&times;</button>
</h4>
</div>
<div class="modal-body">
这里是模态框的内容
</div>
<div class="modal-footer">
<button class="btn btn-default">关闭</button>
<button class="btn btn-default">保存修改</button>
</div>






十八.轮播图 class = carousel 
<div class="container">
    <div class="carousel slide" id="myCarousel">
        <!--标识符(指示符,小圆点)部分-->
        <ul class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
        </ul>


        <!--内容部分-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/carousel1.jpg" alt="这是轮播图的标题">
                <div class="carousel-caption">
                    <!--这是轮播图的标题-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel2.jpg" alt="这是轮播图的标题">
                <div class="carousel-caption">
                    <!--这是轮播图的标题-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel3.jpg" alt="这是轮播图的标题">
                <div class="carousel-caption">
                    <!--这是轮播图的标题-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel4.jpg" alt="这是轮播图的标题">
                <div class="carousel-caption">
                    <!--这是轮播图的标题-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel5.jpg" alt="这是轮播图的标题">
                <div class="carousel-caption">
                    <!--这是轮播图的标题-->
                </div>
            </div>
        </div>


        <!--控制左右换页的箭头-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" >
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" >
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--通过js修改slide速度-->
    <script>
        $(function(){
            $('#myCarousel').carousel({
                interval:2500   //每隔2500毫秒切换一次
            })
        })
    </script>
</div>




第三章 
一.复习:
(一).模态框
1.先创建一个按钮
2.点击按钮的时候,显示出一个模态框
两种方式显示模态框
1.通过data属性实现


2.通过javascript实现


模态框还提供了4个事件:




(二).下拉菜单
代码实现
1.先创建 class = dropdown的div
2.再创建 date-toggle属性是dropdown的div
3.再创建下拉菜单


提供了几个事件


二.滚动监听
参考jQuery全屏滚动插件fullPage.js !
<style>
#section1,#section2,#section3{
height: 728px;
}


#section1{
background: red;
}


#section2{
background: green;
}


#section3{
background: blue;
}


#nav_ul{
position: fixed;
top:20px;
}
</style>

<div class="container">
<div class="row">
<div class="col-lg-3">
<nav>
<ul class="nav nav-pills nav-stacked" id="nav_ul">
<li class="active"><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
</ul>
</nav>
</div>
<div class="col-lg-9">
<div id="section1">
<h1>这是section1的标题</h1>
</div>
<div id="section2">
<h1>这是section2的标题</h1>
</div>
<div id="section3">
<h1>这是section3的标题</h1>
</div>
</div>
</div>
</div>


固定,相对,绝对定位
1.先搭建界面.
2.给导航的a标签href属性指定跳转的位置.
3.绑定监听事件.


除了通过data属性实现滚动监听之外,还可以通过javaScript来实现.
提供了一个事件:activate.bs.scrollspy ,获得当前滚动到的是哪一项.
<div class="container">
    <div class="row">
        <div class="col-lg-3" id="myScroll">
            <nav>
                <ul class="nav nav-pills nav-stacked" id="nav_ul">
                    <li class="active"><a href="#section1">Section1</a></li>
                    <li><a href="#section2">Section2</a></li>
                    <li><a href="#section3">Section3</a></li>
                </ul>
            </nav>
        </div>
        <div class="col-lg-9">
            <div id="section1">
                <h1>这是section1的标题</h1>
            </div>
            <div id="section2">
                <h1>这是section2的标题</h1>
            </div>
            <div id="section3">
                <h1>这是section3的标题</h1>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('body').scrollspy({
            target: '#myScroll'
        })


        //监视滚动的行为
        $('#myScroll').on('activate.bs.scrollspy',function() {
            //找到哪个li标签处于active状态
            var activeItem = $('#myScroll li.active').text();
            alert('当前显示的是:' + activeItem);
        })
    })
</script>






三.标签页或选项卡
fade:渐变
active:活动状态
in:显示内容
注:in和active配合使用


1.通过data-属性实现
<div class="container">
    <ul class="nav nav-tabs"> <!--或者nav-pills-->
        <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
        <li><a href="#product" data-toggle="tab">产品</a></li>
        <li><a href="#other" data-toggle="tab">其他</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade in" id="home" >
            企业网站
        </div>
        <div class="tab-pane fade" id="product">
            公司产品 起重机 压缩机 水泵 电机 净化器
        </div>
        <div class="tab-pane fade" id="other">
            欢迎联系我们
        </div>
    </div>
</div>




2.通过javascript实现
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#home">首页</a></li>
        <li><a href="#product">产品</a></li>
        <li><a href="#other">其他</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade in" id="home" >
            企业网站
        </div>
        <div class="tab-pane fade " id="product">
            公司产品 起重机 压缩机 水泵 电机 净化器
        </div>
        <div class="tab-pane fade" id="other">
            欢迎联系我们
        </div>
    </div>
</div>
<script>
    $(function(){
        $('.nav-pills a').click(function(){
            //$(this)指的就是当前的a标签
            $(this).tab('show');
        })


        $('.nav-pills a').on('shown.bs.tab',function(e){
            //e,指的是-->事件对象,该对象获得当前点击的是哪个a标签
            //var currentItem = e.target;
            //var prevTab = e.relatedTarget;
            var currentItem = $(e.target).text();
            var prevTab = $(e.relatedTarget).text();
            alert('当前的标签页是:' + currentItem);
            alert('上一个标签页是:' + prevTab);
        })
    })
</script>


四.折叠菜单
<div class="container">
    <div class="panel panel-primary" data-toggle="collapse">
        <div class="panel-heading">
            <a href="#collapseArea" data-toggle="collapse"> <!-- data-toggle="collapse"-->
                <h4 style="color:white;">点击折叠,再次点击显示</h4>
            </a>
        </div>
        <div class="panel-collapse collapse in" id="collapseArea">
            <div class="panel-body">
                这里是面板内容区域
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        //$('#collapseArea').collapse('show');
        //$('#collapseArea').collapse('hide');
        //$('#collapseArea').collapse('toggle');


        $('#collapseArea').on('show.bs.collapse',function(){
            alert('即将显示');
        })


        $('#collapseArea').on('shown.bs.collapse',function(){
            alert('已经显示');
        })


        $('#collapseArea').on('hide.bs.collapse',function(){
            alert('即将隐藏');
        })


        $('#collapseArea').on('hidden.bs.collapse',function(){
            alert('已经隐藏');
        })
    })
</script>


五.响应式网站
1.块区域内容垂直居中
让height 和 line-height相等


2.图片垂直居中
图片是行内元素,所以现将图片转换成块元素,再垂直居中