bboyjoe的博客

先给大家体验一下响应式和自适应的区别，请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章，摘抄并修改了一下，请大家欣赏： 起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 、、 和  元素上。.embed-responsive——指定div为具有响应式特性的嵌入内容的组件；.embed-responsive-16by9、.embed-responsive-4by3——指定组件内元素宽高比分别为16:9

Bootstrap能完全友好的支持html5的文本元素，这里不再赘述，具体可参考我另一篇文章《html的文本元素总结》，这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。.small——当前元素字体大小的 85%，常用作副标题时，也可用来代替；.lead——让段落突出显示;.text-left、.text-center、.text-right——将文字于左、居中、于右对齐

.media——指定该元素包裹媒体对象组件；.media-left——设置媒体对象的多媒体内容居左；.media-right——设置媒体对象的多媒体内容居右；.media-middle——设置媒体对象的多媒体内容上下居中；.media-bottom——设置媒体对象的多媒体内容居底；.media-body——设置媒体对象的文本内容部分；.meida-heading——设置h4

.btn-default——按钮的默认样式；.btn-primary——按钮的首选样式；.btn-success——按钮的成功样式；.btn-info——按钮的一般信息样式；‘.btn-warning——按钮的警告样式；.btn-danger——按钮的危险样式；.btn-link——按钮的链接样式；.btn-lg——大按钮；.btn-sm——小按钮；.btn-x

.page-header——指定div元素包裹页头组件； 小镇菇凉 2小时前 .thumbnail——指定元素包裹缩略图组件

.progress——指定div包裹进度条组件；.progress-bar——设置div为进度条样式；.progress-bar-info、.progress-bar-warning、.progress-bar-success、.progress-bar-danger——设置进度条的情境效果；.pregress-bar-striped——设置进度条具有条纹效果；.active—

.list-group——指定ul/div元素为列表组组件；.list-group-item——指定元素为列表组的列表项；.list-group-item-success、.list-group-item-info、.list-group-item-warning、.list-group-item-danger——设置列表项的情境效果；.active——设置列表项为激活状态；.di

.alert——指明div元素为警告框组件；.alert-info、.alert-danger、.alert-warning、.alert-success——给警告框设置情景效果；.alert-dismissible——提示该警告框组件为可关闭的；.close——设置按钮为可关闭；.alert-link——可以为链接设置与当前警告框相符的颜色；

.jumbotron——指定div元素包裹巨幕组件； 巨幕示例 中超大结局预测 中超正经历着两周间歇期，但“间歇”的字眼下是各队为赛季收官所进行的冲刺准备。在还剩9轮联赛的情况下，本赛季的大结局已是露出了可供揣测的端倪：争冠集团中，恒大由数据所体现出的稳定性放大着连续第5个赛季夺冠的希望；残酷的保级战线中，辽足与

.col-xs-*——栅格列，适用于手机（）;.col-sm-*——栅格列，适用于平板（≥768px）;.col-md-*——栅格列，适用于桌面显示器 (≥992px)；.col-lg-*——栅格列，适用于大桌面显示器(≥1200px)；.col-md-offset-*——向右偏移列；.col-md-push-*、.col-md-pull-*——改变列的排序；

data-toggle="tooltip"——指明元素具备工具提示功能；title——工具提示的具体内容；data-placement——设置工具提示的具体方位，默认为top；data-original-title——设置工具提示的原始内容，即title为空时显示在提示框内；data-html="true"——设置工具提示的title能识别html代码，从而能显示更多信息；更多

data-spy="scroll"——向您想要监听的元素（通常是 body）添加滚动监听事件 。data-target=".navbar"——指明导航条为监听目标；data-offset="70"——计算滚动位置时相对于顶部的偏移量（像素数）; 饭盒儿——发现身边不一样的世界

.modal——指明div元素包裹模态框；.fade——给模态框添加淡入淡出效果；.modal-dialog——包裹模态框的所有内容；.modal-sm、.modal-lg——改变模态框的尺寸，以适配不同屏幕的分辨率；.modal-content——承载模态框的内容部分；.modal-header——模态框的头部；.modal-body——模态框的主体部分；.modal

data-toggle="tab"——指明标签项具有切换响应功能；.tab-content——包裹标签页的所有内容部分；.tab-pane——包裹对应标签项的内容部分；.fade——设置标签项切换时有淡入淡出的效果；.in——设置标签页第一项淡入的初始化效果；.active——设置标签页以及对应标签项的内容处于激活状态；更多细节参考示例：

把 Well 用在元素上，能有嵌入（inset）的的简单效果。.well——指定div为well组件；.well-sm、well-lg——指定well适用的屏幕分辨率； 饭盒儿——发现身边不一样的世界 well组

.pagination——指定ul元素包裹分页组件；.pagination-lg、..pagination-sm——改变分页组件的尺寸大小，适配不同屏幕的分辨率；.disabled——指定分页组件的列表项为禁用状态；.active——指定分页组件的列表项为激活状态；.pager——指定ul元素包裹翻页组件；.previous、.next——分别设置翻页组件的列表项元素的链接

.form-control——将单独的表单控件赋予一些全局样式，如默认宽度width:100%；.form-group——包裹表单控件，获得最好的排列；.form-inline——将表单设置为内联表单，只适用于视口（viewport）至少在 768px 宽度时；.sr-only——将label标签隐藏；.help-block——用语设置提示文本；.form-horizontal

轮播请查看以下示例，基本已经涵盖最常用的一个轮播 js插件_轮播 --> .myCarousel{ width:50%; }

data-toggle="collapse"——指明该元素具有折叠功能；data-target——设置元素打开折叠后指向的元素链接；.collapse——用来设置元素为折叠内容；.in——设置折叠内容初始化为显示状态；.panel-collapse——指明该元素内容为折叠面板样式；更多细节请参考示例： 饭盒儿——发现身边不一样的世界

下面是一个比较常见的侧边栏停靠的例子： js插件_侧边栏停靠 --> .affixed-element-top.affix{ top:10px; } .affixed-element-top.affix-bottom{

data-dismiss="alert"——为关闭按钮添加该属性可以使其自动为警告框赋予关闭功能；.fade .in——为警告框在关闭时添加动画效果；更多细节参考示例： js插件_警告框 --> 警告框示例 × 感谢

data-toggle="popover"——使弹出框能够切换状态；title——设置弹出框的标题；data-content——设置弹出框的内容部分；data-placement——设置弹出框的方位（top、left、right、bottom,默认为right）；data-trigger="focus"——设置焦点事件使用户点击空白处即能切换状态；更多细节参考示例：

1）属性：data-loading-text="加载中..."——使按钮呈现加载状态；data-toggle="button"——使按钮能够切换状态；data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能；autocomplete="off"——解决FireFox的兼容性问题：即FireFox会在多个页面加载之间保持按钮的禁用状态;2）方法：$

首先是html承载内容： Bootstrap实战 -->  第一屏  第二屏  第三屏

.btn-group——设置div为按钮组；.btn-group-toolbar——设置div为按钮工具栏（须包裹按钮组）；.btn-group-lg、.btn-group-sm、.btn-group-xs——改变按钮组的尺寸；.btn-group-vertivcal——设置按钮组垂直堆叠排列；.btn-group-justified——设置div包裹的按钮组充满父元素；

.input-group——设置div为输入框组；.input-group-lg、.input-group-sm、.input-group-xs——改变输入框组的尺寸；.input-group-addon——在输入框前或后添加额外内容；.input-group-btn——在输入框前或后添加按钮或按钮式下拉菜单组件； 组件_输入框组

.nav——指定列表元素为导航组件；.nav-tabs——指定导航组件的样式为标签页；.nav-pills——指定导航组件的样式为胶囊式标签页；.nav-stacked——指定标签页的样式为垂直堆叠排列；.nav-justified——指定标签页的样式为两端对齐；.disabled——设置导航栏组件的菜单项为禁用样式； 组件_导航条

.panel——指定div元素包裹面板组件；.panel-default、.panel-primary、.panel-success、.panel-info、.panel-warning、.panel-danger——指定面板的情境效果；.panel-heading——设置面板的标题部分；.panel-body——设置面板的主体部分；.panel-footer——设置面板的脚注

.navbar——设置nav元素为导航条组件；.navbar-default——指定导航条组件为默认主题；.navbar-inverse——指定导航条组件为黑色主题；.navbar-fixed-top——设置导航条组件固定在顶部；.navbar-fixed-bottom——设置导航条组件固定在底部；.container-fluid——设置宽度充满父元素，即为100%；.na

首先利用html和Css实现以下效果 <a href="http://wpa.qq.com/msgrd?v=3&uin=2876355767&site=qq&menu=yes" target

.table——基础表格样式；.table-striped——给之内的每一行增加斑马条纹样式；.table-bordered——为表格增加边框；.table-hover——为之内的每一行作悬停效果；.table-condensed——让表格更加紧凑，单元格中的内补（padding）均会减半。.active——鼠标悬停在行或单元格上时所设置的颜色；.success——标识成功