之前一直喜欢自己码网页，从不使用框架，认为框架不受自己的掌控，出了bug不知道问题在哪，直到最近需要重新构建一个项目，网页特别多，为了提高效率，必须得使用框架了
生产环境
- 下载bootstrap的包，引入基本的css、js（在这之前引用jquery,因为bootstrap的js文件是基于jquery的）
- 引入一下代码，基本页面就出来了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
boorstrap的排版
标题
1、标题(h1~ h6/.h1~.h6)
- h1 36px
- h2 30px
- h3 24px
- h4 18px
- h5 14px
- h6 12px
2、副标题(small)
文本
1、p段落(默认14px，行高20px，底部有10px的外边距)；
- mark 标签 提示
- del 标签样式
- ins 标签下划线
-strong 标签 文字加粗
2、对齐方式 - text-left 文字靠左
- text-center 文字居中
- text-right 文字靠右
- text-lowercase 大写
- text-uppercase 小写
- text-capitalize 首字母大写
表格(table)
1、带边框的表格
- table-bordered
2、条纹状表格（一行有颜色，一行没颜色） - table-striped
3、悬停变色 - table-hover
4、紧凑风格 - table-condensed
5、表格里的几种颜色 - success、active、info、waring、danger
表单
-不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
- 表单由from包裹
<form>
<div class="form-group"> //from-group有底边距的
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
- form-inline 水平排列
- input-lg 输入框变大
- 按钮有激活（active）、禁用（disable）、宽度（btn-block）
bootstrap中的图片
形状
- img-rounded 圆角
- img-circle 圆形
- img-thumbnail 带有边框的圆角圆形
响应式
- 屏幕像素
1、1px对应苹果屏幕可能是多个像素点，所以border在苹果手机上很粗，解决方案检测是否是视网膜屏
var metaEl = doc.createElement('meta');
var scale =isRetina?0.5:1
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
-
1px解决方案.png
2、pc像素大小
屏幕尺寸.png
栅格
- .col-lg- 大屏幕 大桌面显示器 (≥1200px)
- .col-md- 中等屏幕 桌面显示器 (≥992px)
- .col-sm- 小屏幕 平板 (≥768px)
- .col-xs- 超小屏幕 手机 (<768px)
- .col-md-offset-* 类可以将列向右侧偏移
单位
单位.png
bootstrap组件
怪异属性
1、role
2、aria-label
3、tablndex
4、data-图标
1、直接应用图标类名下拉菜单
1、.dropdown 控制组件下拉
2、.dropdown-menu-right 代替.pull-right右对齐
3、divider分割线
<div class="dropdown">
<button class="btn -btn-default dropdown-toggle" data-toggle="dropdown"> //data-自定义事件 绑定一个效果
this is button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="www.baidu.com">baidu</a>
</li>
<li>
<a href="www.baidu.com">baidu</a>
</li>
<li>
<a href="www.baidu.com">baidu</a>
</li>
</ul>
</div>
- 控件组
1、.input-group 表示控件组
2、.input-group-addon 可放置额外内容及图标
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
- 导航
1、以一个带有class.nav的无序列表开始
2、.nav-tabs代表可切换的导航
3、.nav-pills代表胶囊导航
4、.nav-justified使导航垂直
<ul class="nav nav-tabs">
<li class="active">
<a href="www.baidu.com">baidu</a>
</li>
<li>
<a href="www.baidu.com">baidu</a>
</li>
</ul>
- 分页
1、.pagination 在父元素中添加表示分页
2、.pager放置在翻页区域
3、.previous 把链接向左对齐，.next把链接向右对齐 - 进度条
1、.progress 表示进度条
2、通过状态类改变进度条的颜色
3、.progress-bar-striped使得进度条颜色渐变 - 列表
1、.list-group 代表列表组
2、.badge代表状态数
3、.active代表选中的状态
<ul class="list-group">
<li class="list-group-item">
list
<span class="badge">14</span>
</li>
<li class="list-group-item">
list
<span class="badge">14</span>
</li>
</ul>
- 面板(弹窗及提示信息）
1、.panal代表面板
2、.panel-body代表面板内容
3、.panel-footer 代表面板的注脚
bootstrap插件
- 不同版本的bootstrap.js需要引入相对应的jquery.js
- 通过data属性控制页面交互
- $(document).off('.data-api')解绑属性绑定
水电费水电费
水电费
水电费
是的f是的
