bootstrap响应式页面

响应式页面（Responsive web page）2010年提出，是可以智能的根据用户使用的设备来选择排版布局和样式的页面的，就是一套代码适用于多个设备，特点是不会出现横向的滚动条。响应式页面设计其实在实际的应用中并不是很广泛，一般具有一定规模的网站都会有移动端、PC端、pad端等几套代码，根据运行的设备来选择加载的代码。但是响应式页面也存在一定的作用，可以用作一些展示性的页面。

常规的网站，大部分是1200px，缩小会出现横向滚动条，布局，样式全都不会改变。

响应式页面也存在了一些不足，比如页面内容不宜过多，只适合做一些展示类的网站不能有过于复杂的动画。

自适应页面就是有多套代码，根据不同设备加载不同的代码。

bootstrap目前到第四版，版本2主要做PC端已经逐步淘汰了，主要用的是移动设备优先的3，4也是移动设备优先，放弃了老版本的IE，看实际情况使用。

bootstrap共有五大块，起步、全局css样式、组件、JavaScript插件、定制。主要应用就是classname需要记住。

1.响应式网站如何编写：　　

1）必须声明viewport（重点重点）

2）使用流式布局

float:left , display:inline-block

3）文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）

2.em和rem的区别（面试题）　　

em是一个相对单位，相对父元素

rem是一个相对单位，相对于页面的根元素，即html

4.最重要的原则：媒体查询技术 css3中的内容 media query

写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了

做响应式页面的代码的一般设置的步骤有：

1）指定语言的类型 <html lang="zh-CN">

2）设置meta标签，为了兼容老版本的IE <meta http-equiv="X-UA-Compatible" content="IE=edge">

3）必须项，设置视口 <meta name="viewport" content="width=device-width, initial-scale=1">

4）引入bootstrap的主文件 <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">

5）处理兼容性的js文件，用cssHack 条件注释法　　　　　　

<!--[if lt IE 9]>

<![endif]-->

6）引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载，最好使用bootstrap自己带的jquery。

7）引入bootstrap中所需要用到的JavaScript插件。<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>

模板是

DOCTYPE html -- .指定语言的类型 -- html head meta -- .设置meta标签，为了兼容老版本的IE -- meta http-equiv -- .必须项，设置视口 -- meta titleDocument/title -- .引入bootstrap的主文件 -- link -- .处理兼容性的js文件 cssHack 条件注释法 -- --if lt IE script /script script /script endif-- /head body div -- 最大的一个使用宽度为970px -- 这个是container容器 /div div -- 使用宽度为100% -- 这个是container-fluid容器 /div -- .引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -- -- 最好使用bootstrap自己带的jquery -- script /script -- .引入bootstrap中所需要用到的JavaScript插件 -- script /script /body /html

一、全局css样式

1.栅格系统

栅格系统是由bootstrap提供的一套响应式、移动设备优先的流式栅格系统，随着屏幕尺寸把屏幕自动分成最多12列。

媒体查询

超小屏幕

手机

(<768px)（总是水平排列） .col-xs-

小屏幕

平板 (≥768px) 　　　　 .col-sm-

中等屏幕

桌面显示器 (≥992px) .col-md-

大屏幕

大桌面显示器 (≥1200px) .col-lg-

3.bootstrap提供的一些图标，bootstrap提供了二百多个图标，可以用span标签来使用

h图标/h span /span span /span span /span span /span span /span span /span span /span

4.bootstrap提供的一些按钮及其样式，可以用btn-lg、btn-sm和btn-xs来调整按钮的大小。

样式是预定义的样式，

btn-default 默认样式

btn-primary 首选项

btn-success 成功

btn-info 一般信息

btn-warning 警告

btn btn-danger 危险

h按钮/h button 按钮/button button primary/button button success/button button info/button button warning/button button danger/button h按钮尺寸/h button 按钮/button button primary/button button success/button button info/button h把图标显示在按钮里/h button span /span 按钮/button

5.文本

常用文本对齐

.textleft 文本左对齐

.text-center 文本居中对齐

.text-right 文本右边对齐

Left aligned text. Center aligned text. Right aligned text. Justified text. No wrap text.

6.响应式图片

.img-responsive可以设置响应式布局，本质就是设置了max-width: 100%;、 height: auto; 和 display: block;

如果需要水平居中的话使用.center-block。

7.一些常用的类

关闭按钮 . Close 可以让模态框和警告框小时

三角符号 .caret 可以指示有下拉菜单的功能

快速浮动 pull-left 左浮动右边浮动同理

内容块居中 center-block

清除浮动 .clearfix

二、组件

1.一些图标

　　还有很多，可以参考手册。

2.下拉菜单

h下拉菜单/h div button data-toggle aria-expanded Dropdown span /span /button ul aria-labelledby li a Action/a/li li a Another action/a/li li a Something here/a/li li a Separated link/a/li /ul /div

还有一种按钮式下拉菜单

点几按钮可以出现下来菜单

div button data-toggle aria-haspopup aria-expanded Action span /span /button ul lia Action/a/li lia Another action/a/li lia Something here/a/li li /li lia Separated link/a/li /ul /div

3.按钮组，可以设置单选框或者复选框的行为

div aria-label button Left/button button Middle/button button Right/button /div

8.输入框

h输入框/h div span /span input /div div span /span input /div

9.导航栏

h导航栏/h nav div ul li a Home/a/li lia About/a/li lia Contact/a/li li a data-toggle aria-expandedDropdown span /span/a ul lia Action/a/li lia Another action/a/li li /li li Nav header/li lia Separated link/a/li /ul /li /ul /div--/.nav-collapse -- /div /nav

10.表单

h表单/h form div span /span input /div div span /span input /div div label File input/label input p Example block-level text here./p /div div label input Check me out /label /div button Submit/button /form

h图标/h span /span span /span span /span span /span span /span span /span span /span