Bootstrap框架
bootstrap
-
只需要留一个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-width: 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内部最下方书写代码