Bootstrap

一：Bootstrap

1.简洁、直观、强悍的前端开发框架，让web开发更迅速、简单 2.Bootstrap是基于html，css，js代码的优秀的前端开发框架 -- 对html,css,js的封住 3.作用     1.提高开发效率     2.开发响应式页面         开发一个页面可以同时在手机端，平板端，电脑端可以看到所有内容         会根据视口的缩放进行自适应

二：Bootstrap起步     1.下载     2.导入bootstrap -- css,js,图标         bootstrap.min.css -- 压缩版 -- 运行时用         bootstrap.css    -- 开发版 -- 开发的时候用     3.引入css和js       

<!--引入bootstrap的样式--> <link rel="stylesheet" href="css/bootstrap.css" /> <!--引入jquery框架 -- js的框架--> <script type="text/javascript" src="js/jquery.min.js" ></script> <!-- 引入bootstrap的js --> <script type="text/javascript" src="js/bootstrap.min.js" ></script>

     三：布局容器DIV

class="container"：两端留白 class="container-fluid"：100%宽度，两端没有留白 class="text-?":文本颜色 class="bg-?":背景颜色 ？：success，danger，warning，info，active

         四：栅格系统     1.bootstrap将一行自动分成12个网格，需要占多少就用多少     2.栅格系统写容器中     3.如何表示一个格子：col-视口种类-n         col：表示列         视口种类：             手机屏幕宽度xm=x-small=特小号             平板窗口的宽度sm = small =小号             笔记本-普通的台式电脑md=中号             超大屏幕lg（large大号）             主要以md为主         n：表示1-12     <!-- 在md的宽度一行显示12格，默认情况下屏幕缩小到sm,xs的宽度时，一行显示1div -->     <!-- col-sm-2：在屏幕缩小到sm（平板屏幕）的宽度时，一行显示6个div -->     <!-- col-xs-4：在屏幕缩小到xs(手机屏幕)的宽度时，一行显示3个div -->   

<div class="col-md-1 col-sm-2 col-xs-4">1</div>

         <!--         col-md-offset-8:向右偏移8个网格         hidden-sm：到sm的宽度隐藏起来     -->   

<div class="row"> <div class="col-md-4 col-md-offset-8 hidden-sm">列偏移属性的使用</div> </div>

     五：表格     table：基本表格     table-striped：条纹（奇数行和偶数行背景颜色不一样）     table-hover：悬停（鼠标移动到某一行的时候，该行出现不一样的背景颜色，鼠标移开，恢复原样）     table-bordered：表格边框     table-responsive：当表格的列数比较多的时候，当窗口缩到xs的时候，数据显示不全，就会在整个窗口出现一个滚动条     这是可以使用响应式表格，只会在表格下放出现一个滚动条     使用方法：         1.在<table>的外面使用一个<div>包起来，然后div中设置class="table-responsive"即可     列和单元格背景样式：         success，danger，info，warning，active                  六：表单     垂直表单：

<div class="container"> <h2>垂直表单</h2> <form action="#"> <div class="form-group"> <label for="username">用戶名：</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="username" name="username"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="pwd"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

    内联表单：<form class="form-inline" action="#">

<div class="container"> <h2>内联表单</h2> <form class="form-inline" action="#"> <div class="form-group"> <label for="exampleInputName2">用户名：</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" name="username"> </div> <div class="form-group"> <label for="exampleInputEmail2">密码：</label> <input type="text" class="form-control" id="exampleInputEmail2" placeholder="password" name="pwd"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div>

    水平表单：<form class="form-horizontal">

<div class="container"> <h2>水平表单</h2> <form class="form-horizontal" action="#"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用户名：</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEmail3" placeholder="username" name="username"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputPassword3" placeholder="Password" name="paw"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div>

    表单中需要修改的内容：         1.<form>中的action属性         2.表单项中的name属性值和placeholder属性值，type         3.里面的class式bootstarp样式，一般情况不修改 七：图片轮播     图片轮播分三个部分：         轮播指标：有多少个轮播图就有多少个轮播指标             

<ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol>

            class="active":默认从第一张图片显示         轮播导航：一般不用修改             

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

            注意：href="#carousel-example-generic"必须要与整个轮播插件的id值对应                 <div id="carousel-example-generic"         轮播项：图片内容             

<div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/lb8.jpg" alt="...">

                    <!--轮播标题，可以不用-->                 

<div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="img/lb9.jpg" alt="..."> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="img/lb13.jpg" alt="..."> <div class="carousel-caption">标题 3</div> </div> <div class="item"> <img src="img/lb15.jpg" alt="..."> <div class="carousel-caption">标题 4</div> </div> </div>

八：导航栏<nav> 1.导航头 + 导航 2.导航头 3.图标的用法     1.需要导入图标的资源fonts     2.图标是用<span>标签写的，找到图标的class