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内部最下方书写代码