UI框架，bootstrap - kk12138
UI框架（bootstrap）
一.响应式概念（responsive web page）
1.2010年提出一个网页可以兼容多种设备，而不是设备写一套网页
（补充：常规的网站大部分是1200px;缩小会出现滚动条布局样式全部不会改变；
响应式和自适应的区别：（1）响应式：1套代码；示例：微软
（2）自适应：多套的代码，根据不同的设备加载不同的代码；（示例：大部分网站都有）
）
2.响应式网页的不足：
（1）：内容不宜过多，只适合一些展示效果；
（2）：代码量变大了，复杂了；
（3）：不能有过于复杂的动画
3.响应式和自适应的共同特点：
（测试）：浏览器的自带的模拟器；（优点：简单方便；缺点：结果要进一步确定）
真实物理设备测试；大公司根据测试来进行数据分析（优点：测试真实可靠；缺点：成本高；任务工作量极大）
二.响应式网站如何编写：
1.必须项：声明 viewport（重点）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2.使用流式布局
实现方法：（1）：float：left；
（2）：display：inline-block；
3.文本，图片，容器——————使用相对尺寸（rem，em；xx%）
em是一个相对单位，大小相对于父元素；
rem是一个相对单位，相对于页面的根元素，即HTML
谷歌浏览器的最小好字体为12px，如果不足12px，全部显示12px；其他的浏览器没有限制
font-size：100px;（大部分浏览器的默认字体为16px，62.5%为10px）
4.最重要的原则：媒体查询技术 css3中的内容 media query（写响应式一般不需要去管高度，高度让其自己去变化）
css3的媒体查询
根据不同设备，查询到不同的代码，然而执行，不需要刷新
三.BootStrap
1.版本号：
.2——主要用于pc端
.3——移动设备优先（使用广泛）
.4——移动设备优先，放弃了老版本的IE
2.BootStrap的五大步骤
（1）起步（事项）：
1——制定语言类型（属于多语言类型）
<!-- 1.指定语言的类型 --> <html >
2——设置meta标签兼容老版本的IE
<!-- 2.设置meta标签，为了兼容老版本的IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">3——必须项：设置视口
<!-- 3.必须项，设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">4——引入bootstrap的主文件
<!-- 4.引入bootstrap的主文件 --> <版本号>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">5——条件（处理兼容性的方法的JS文件）
<!-- 5.处理兼容性的js文件
cssHack 条件注释法 -->
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->6——引入jQuery样式，因为bootstrap是依赖于jQuery，所以jQuery必须放在前面加载
<!-- 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -->
<!-- 最好使用bootstrap自己带的jquery -->
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>7——引入bootstrap中所需要用到的JavaScript编码
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
（所有文件引入完成后则进入下一步的布局）
（2）全局css样式
1——栅格系统
行（row）必须在盒子中（.container）-在栅格中一行被分割成12份
类型大小：
.col-xs-number 超小屏幕 手机 （<768px）-number表示一行中被分为number个格子
.col-sm- 小屏幕 平板 （>=768px）
.col-md- 中屏幕 桌面显示器（>=992px）
.col-lg- 大屏幕 大桌面显示器（）
（当屏幕的大小缩小到每个屏幕大小指定的大小的时候，这个时候每个格子会自成一行）
2——table（表格属性）
.table 为基本表格类型
.table table-striped 条纹状表格
.table table-bordered 带边框的表格
.table table-hover 悬停变色的表格
3——color（颜色属性）
.active
鼠标悬停在行或者单元格上时所设置的颜色
.success
表示成功或者积极的动作（绿色）
.info
标识普通的提示信息和动作（浅蓝色）
.warning
标识警告或需要用户注意（黄色）
.danger
标识危险或者潜在的带来负面影响的动作（红色）
4——按钮的形式
<h3>三种按钮的形式</h3>
<a href="" class="btn btn-default">btn1</a>
<input type="text" value="btn2" class="btn btn-default">
<button class="btn btn-default">btn3</button>
按钮所对应的颜色：
对应得6种颜色
（默认样式） Default
（首选项） Primary
（成功） Success
（一般信息） Info
（警告） Warning
(危险) Danger-->
5——img（图片类样式）
.img-rounded 圆角样式
.img-circle 圆形样式
6——表单样式
默认表单样式：默认值;
内联样式：.form-inline；
水平排列的表单：.form-hrizotal;
（3）组件
1——样式图标：
<a href="" class="btn glyphicon glyphicon-home btn-default">主页</a>
<a href="" class="btn glyphicon glyphicon-user btn-success">用户</a>
<a href="" class="btn glyphicon glyphicon-cog btn-danger" >配置</a>
<a href="" class="btn glyphicon glyphicon-repeat btn-danger">刷新</a>
<a href="" class="btn glyphicon glyphicon-star btn-warning">打分</a>
<a href="" class="btn glyphicon glyphicon-envelope btn-info">发邮件</a>
<a href="" class="btn glyphicon glyphicon-heart btn-danger">收藏</a>
<a href="" class="btn glyphicon glyphicon-thumbs-up btn-info">点赞</a>
<a href="" class="btn glyphicon glyphicon-link btn-info">分享</a>
<a href="" class="btn glyphicon glyphicon-off btn-success">删除</a>
<a href="" class="btn glyphicon glyphicon-camera btn-info">拍照</a>
<a href="" class="btn glyphicon glyphicon-map-marker btn-default">定位</a>
<a href="" class="btn glyphicon glyphicon-search btn-primary">放大镜</a>
<a href="" class="btn glyphicon glyphicon-trash btn-success">垃圾箱</a>
<a href="" class="btn glyphicon glyphicon-step-backward btn-info">上一首</a>
<a href="" class="btn glyphicon glyphicon-step-forward btn-warning">下一首</a>2——下拉菜单（上拉菜单）
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>3——分割线
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li role="separator" class="divider"></li> ... </ul>
4——禁用的菜单项
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li><a href="#">Regular link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> <li><a href="#">Another link</a></li> </ul>
（4）JavaScript插件
1——插件弹出框
<div class="container">
<button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" data-content="And here\'s some amazing content. It\'s very engaging. Right?" >点我弹出/隐藏弹出框</button>
</div>2——插件收放效果
<div class="container">
<a href="#Mytarget" data-toggle="collapse">展开和收起</a>
<button data-toggle="collapse" data-target="#Mytarget">展开/收起</button>
<div class="collapse" >
<div class="well">
<p>HTML</p>
<p>css</p>
<p>JavaScript</p>
</div>
</div>
</div>（5）定制
通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。