UI框架（bootstrap）
Posted lyx1014
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 lang="zh-CN">
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" id="dropdownMenu1" 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" id="Mytarget"> <div class="well"> <p>HTML</p> <p>css</p> <p>JavaScript</p> </div> </div> </div>
（5）定制
通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。
以上是关于UI框架（bootstrap）的主要内容，如果未能解决你的问题，请参考以下文章
有哪些值得推荐的类似 jQuery UI 或者 Bootstrap 这样的 UI 框架