Bootstrap框架

bootstrap

js

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

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

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

栅格系统

row(行)
col(列)

<style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>

媒体查询

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

响应式重置

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

列偏移

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

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="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 <cite title="Source Title">Source Title</cite></footer>
</blockquote>


<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<ul class="list-inline">
  <li>...</li>
</ul>

表格标签

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

表单

登陆示例
input框提示信息显影

按钮

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

快速浮动

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

Font-Awesome简介

css
fonts

模态框

data参数绑定

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

自定义代码

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

克隆标签

默认情况下只克隆标签的文本和样式不克隆事件绑定事件的两种方式第一种

$('div').click(function(){
			事件代码
		})

第二种

$('div').on('事件名',function(){
			事件代码
		})

事件冒泡

事件会一层层往上一级汇报
如何组织事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
注意需要加上形参

$('p').click(function (e) {
			alert('p');
			e.stopPropagation()
		});

事件委托:

将触发的事件委托给内部某个标签去执行
无论改标签是初始化就有还是后期动态添加都可以执行

$('body').on('click','button',function () {
			alert(123)
		})

文档加载

三种方式:
第一种(了解):
$(document).ready(function(){
// 在这里写你的JS代码...
})
第二种(了解):
$(function(){
// 你在这里写你的代码
})
第三种:
直接在body内部最下方书写代码