Bootstrap是一个基于HTML CSSJavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面.
CDN:
<meta charset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport" content="width=device-width,initial-scale=1">
<!-- 上述3个meta标签必须放在最前面-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<linkhref="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的Bootstrap 核心JavaScript 文件-->
<scriptsrc="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
页面排版
1.Bootstrap中默认的字体大小为14px,(Nativeapp字体默认为17)行高为20px,<p>元素为1/2行高(10px)颜色为#333
2.标题:h1~h6(36px,30px,24px,18px,14px,12px)
3.h标签下可以嵌套<small>标签,通常作为副标题使用,h1~h3下:small元素的大小只占父元素的65%(23.4px,19.5px,15.6px),h4~h6下:small元素只占父元素的75%(13.5px,10.5px,9px),small标签的颜色是浅灰色:#777,行高为1,粗度为400.
4.内联文本元素
添加标记:<mark>//<p>听众朋友大家好,这里是<mark>中央人民广播电视台</mark></p>
删除文本:<del>//<del>我都卖完了你才来</del>
无用文本:<s>//<s>我跟删除长一样但是我真无用</s>
插入文本:<ins>//<ins>我是个插入文本</ins>
强调文本:<small>,<strong>,<em>
//<small>我是标准字号的85%</small>
//<strong>我是加粗的:700</strong>
//<em>我用的很多,因为我是歪的</em>
5.对齐
<p class=’text-left’>我居左对齐</p>
<p class=’text-center’>我居中对齐</p>
<p class=’text-right’>我居右对齐</p>
<p class=’text-justify’>我两端对齐,但是我支持度不高</p>
<p class=’text-nowrap’>我不换行</p>
6.大小写
<p class=’text-lowercase’>小写</p>
<p class=’text-uppercase’>大写</p>
<p class=’text-capitalize’>首字母大写</p>
7.地址文本
//地址文本对原本的css样式做的复写,去掉了倾斜,设置了行高
<address>
<strong>华清远见教育集团</strong>
<p>电话:<small>(0817)888-8888</small><p>
</address>
8.引用文本
//左边有一个5px的边框线条
<blockquote>看看我左边</blockquote>
<blockquote class=’blockquote-reverse’>又在右边了</blockquote>
<blockquote class=’pull-right’>同上</blockquote>
9.列表排版
//默认样式
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
//移除默认样式
<ul class=’list-unstyled’>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
//设置成内联
<ul class=’list-inline’>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
表格
----基本样式
<table class=’table’>
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>蛮子</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>赵信</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>剑圣</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
----条纹状表格
<table class=’table table-striped’>
----带边框的表格
<table class=’table table-bordered’>
----鼠标悬停选中效果
<table class=’table table-hover’>
----状态类
//单独设置每一行的背景样式
<tr class=”success”> 绿
<tr class=”info”> 蓝
<tr class=”warning”> 红
5种不同的样式:
active 鼠标悬停在行或者单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或者需要用户注意
----隐藏某一行
<tr class=’sr-only’>
----响应式表格
//表格响应式,设置父元素,当父元素小于768px时表格出现边框
<body class=’table-responsive’><tableclass=’table’>....
按钮
-----常当做按钮使用的元素
//转化成普通按钮
<a href=’xxx’ class=’btn btn-default’>按钮</a>
<button class=’btn btn-default’>按钮</button>
<input type=’button’ class=’btnbtn-default’ value=’btn1’>
//注:
①如果<a>元素被作为按钮使用---本来锚点是用来链接其他页面或者连接当前页面的其他部分,如果是跟按钮一样要触发某些功能,必须设置属性:role=’button’
②尽量使用<button>来获取页面上匹配的绘制元素
-----样式
<button class=’btn btn-default’>按钮</button>
常用样式:
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式
----尺寸大小
<button class=’btn btn-lg’>按钮</button>
常用尺寸:
btn-lg //大
不写 //中等
btn-sm//小
btn-xs//x小
----块级按钮
btn-block//把按钮设置为块级元素
<button class=’btn btn-block’>按钮</button>
-----激活状态
active// 样式是点击时的样式不是悬停时的
<button class=’btn active ’>按钮</button>
-----禁用状态
disabled//点击的时候不允许点的样式
<button class=’btn disabled’>按钮</button>
表单
----表单元素的标签必须有method和action属性
<formmethod=”POST” action=”xxx.com”>
----表单里的每一个输入控件必须对应一个展示标签(说明标签),并且得给它设置for属性,想隐藏就加上属性class="hidden"
<labelfor=’userid’>请输入账号</label>
<inputtype=’text’id=’userid’name=’id’>
----基本样式
<form method=’post’ action=’xxx’>
<div class=’form-group’style=’margin:0px 50px’>//控件放在div里(form-group用作加行间距)
<label for=’email1’ class=’control-label’>邮箱</label>//control-label自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果
<input id=’email1’ type=’email’ class=’form-control’>//form-control自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果
</div>
<div class=’form-group’ style=’margin:0px50px’>
<label for=’password1’>密码</label>
<input id=’password1’ type=’password’class=’form-control’>
</div>
</form>
----内联
//让表单里面的控件左对齐浮动(横排),当屏幕小于768px时恢复独占样式(竖直)
<form class=’form-inline’>
----合组
//输入控件前后增加片段(前面例子的’邮箱’两个字,跟控件没有合并)
<form method=’post’ action=’xxx’class="form-inline">
<label for='text1'>价格:</label>
<div class='input-group'>//合并组的盒子
<div class="input-group-addon">¥</div>//前合并
<input id='text1' type='text'class='form-control'>//控件
<divclass="input-group-addon">.00</div>//后合并
</div>
</form>
-----单复选框
①默认(都在一行)
<div class='checkbox'>
<labelfor=’it1’>//不加label文本不能点
<input id="it1" type='checkbox'name='it'>前端
</label>
</div>
②内联checkbox-inline
<div class='checkbox'>
<label for=’it1’class=’’checkbox-inline’’>//在label上加
<input id="it1"type='checkbox' name='it'>前端
</label>
</div>
③禁用(不准点)disabled
<div class='checkbox disabled'>//这里加,文本不能点
<label for=’it1’>
<input id="it1"type='checkbox' name='it' disabled>前端//这里加,框也不能点
</label>
</div>
④单选框
把上面的'checkbox' 换成radio 就ok了
-----下拉列表
<select class=’form-control’>
<option>北京</option>
<option>成都</option>
<option>阆中</option>
</select>
-----校验状态
<div class=’form-group has-error’>//错误状态
//如果想文字也出效果,就在label上也加class=’has-error’
状态:
has-error 错误状态
has-success 成功状态
has-warning 警告状态
<form method="post" action="xxx">
<div id="div1"class="form-group">
<label for="pp1">xxx</label>
<input id="email" type="email"class="form-control">
</div>
</form>
<script>
var email=document.querySelector("#email")
email.οnchange=function(){
var val=email.value
if(val==1){
console.log(val)
document.querySelector("#div1").className+='has-success'//加类注意空格
}
}
</script>
-----尺寸
<input type=’password’ class=’form-controlinput-lg’>//大
<input type=’password’ class=’form-control’>//中
<input type=’password’ class=’form-control input-sm’>//小
图片
----图片形状
<img src=’xxx’ alt=’这是个图片’ class=’img-rounded’>//圆角矩形
<img src=’xxx’ alt=’这是个图片’ class=’img-circle’>//圆(正方形圆,长方形椭圆)
<img src=’xxx’ alt=’这是个图片’ class=’img-thumbnail>//边框,常用作缩略图
----响应式
<img src=’xxx’ alt=’这是个图片’ class=’img-responsive’>//改变屏幕大小图片跟着变
<img src=’xxx’ alt=’这是个图片’ class=’img-circle img-responsive’>
