Bootstrap框架

生产环境下载

CDN简介(内容分发网络)

bootstrap文件划分

• js

  只需要留一个bootstrap.min.js即可

• css

  只需要一个bootstrap.min.css即可

• fonts

  都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意

bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

实例精选

实际网站示例

Normalize.css(不同浏览器样式一致性)

布局容器

• container与container-fluid

栅格系统

• row(行)

• col(列)

<style>
       .red{
           background-color: red;
           border: 3pxsolidgreen;
           height: 100px;
      }
</style>
<divclass="container">
   <divclass="row">
       <divclass="col-md-6 red"></div>
       <divclass="col-md-6 red"></div>
   </div>
</div>
<!--
       6，6
       2，10
       1～12
       再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

媒体查询

<style>
.c1{
           background-color: red;
      }
       @mediascreenand(max- 600px){
           .c1{
               background-color: green;
          }
      }
</style>
<divclass="col-md-6 red c1"></div>

响应式列重置

<style>
.c2{
           background-color: red;
      }
       .c3{
           height: 60px;
      }
</style>
<divclass="container">
   <divclass="row">
 <divclass="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
 <divclass="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
 <!-- Add the extra clearfix for only the required viewport -->
 <divclass="clearfix visible-xs-block"></div>
 <divclass="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
 <divclass="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

列偏移

<divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<pclass="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
​
<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
​
​
<!--列表组-->
<ulclass="list-unstyled">
 <li>...</li>
</ul>
​
<ulclass="list-inline">
 <li>...</li>
</ul>

表格标签

<tableclass="table table-bordered table-hover table-striped"></table>
<trclass="active">...</tr>

表单

• 登陆示例

• input框提示信息显影

按钮

<buttonclass='btn-success/btn-info/btn-primary/btn-danger/btn-warning'>
按钮
</button>

快速浮动

<divclass="pull-left">...</div>
<divclass="pull-right">...</div>

组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

Font-Awesome简介

• css

• fonts

标签页

• 实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)

JS插件

模态框

• data参数绑定

  <buttontype="button"data-toggle="modal"data-target="#myModal">Launch modal</button>

• 自定义代码

$('#myModal').modal('show/hide')

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')