Bootstrap知识点笔记

95 阅读 0 评论 63 点赞

我是靠谱客的博主烂漫小蚂蚁，最近开发中收集的这篇文章主要介绍Bootstrap知识点笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

添加小程序，兑换各种视频教程/数据资源。

1.什么是响应式布局：网页会根据浏览器设备不同自动改变布局；

2.响应式网页必备：

（1）流式布局：float:left/right;

（2）可以改变尺寸图片/文字大小,如%、auto、em;

（3）缺点：不适合大型页面;少用overflow;

3.如何编写响应式网页：常用meta设置横竖屏幕，以及禁止识别电话邮箱<meta name=”format-detection”content=”telephone=no,email=no”/>; 识别电话邮箱<a href=”tel:110”>拨打110</a>，<a href=”mailto:2582657855@qq.com”>发送邮箱</a>；清除页面自带的滚动，由内容决定滚动，body,html{height:100%,overflow:hidden},移动端开发时，width值为百分比，高度为px具体值；

（1）声明viewport视口，<meta name="viewport" content="width=device-width">;

width=device-width;表示宽度是设备屏幕的宽度；

initial-scale=1.0;表示初始化缩放比例，与最小缩放比例值一致；

minimum-scale=1.0;表示最小缩放比较；

maxiumum-scale=1.0;表示最大缩放比较；

user-scalable=no;表示用户是否可以调整缩放比例；

注意：可以在页面加载前先js获取设备的宽度，然后确定一个在所有设备下的分辨率即目标设备宽度，来代替（1）的声明：

(function(){

var w=window.screen.width; //获取设备屏幕的宽度

var tarW=320; //确定一个目标分辨率，即在所有设备下都能是这个宽

var scale=w/tarW;

var meta=document.createElement(‘meta’);

meta.name=”viewport”;

meta.content=’initial-scale=’+scale+’,minimum-scale=’+scale+’,maxiumum-scale=’+scale+’,user-scalable=no’;

document.head.appendChild(meta);

})();

注意：这种方法获取设备宽度确定一个目标分辨率之后，页面中元素的宽可以不用百分比了，直接用px取值去以320px的分辨率宽为设备宽的参考标准；

（2）使用流式布局：float:left;

（3）所有容器/图片/文字使用相对尺寸：如%，em等；文字大小不能使用px；网页文字默认大小16px;如可以定义图片的宽度为max-width:100%;

（4）最重要的原则：使用css3 media query；

（5）将aiticle,aside,footer,header,hgroup,nav,section,details,figure变成快级元素block了；

（6）将canvas,audio,video显示为行内块元素inline-block；修改的a的下划线none;

（7）.container容器是固定宽度并支持响应式布局，.container-fluid为类似100%屏幕宽度的容器；.row必须包含在以上2种容器之一中，其直接子元素必须是.col;

（8）bootstrap:将全局字体默认14px大小，行高1.428；

4.CSS3媒体查询技术：包括查询浏览网页的设备(screen(pc/phone/pad),print,tv等)，

设备的类型（尺寸/对比度等）；两种方式：

（1）执行不同的外部css文件：如<link media="(only)screen and (min-width:776px) and (max-width:991px) href="pad.css"/>；

（2）根据媒体查询的结果执行不同的CSS片段：@media screen (min-) and (max-widht:x)/(orientation:landscape/portrait横/竖屏){//css样式};

5.bootstrap全局样式：

（1）按钮：.btn 按钮的样式，以下样式需要在这个样式基础上下；

.btn-default 白底黑字按钮；

.btn-danger/warning/success/info/primary 按钮的五种颜色；

.btn-lg/sm/xs 大、中、小按钮；

.btn-block 块级一整行的按钮；

.active/disabled 激活/禁用按钮；

.btn-group 行内块；

.btn-group-vertical ;

.btn-toolbar ;

.btn-navbar icon-bar(块级)；

.btn-inverse ;

小工具：

.close 关闭；如<button class="close">X</button>;

.caret 小三角；如<span class="caret"></span>;

.pull-left/right 向左/右浮动；

.center-block 网页居中；

.clearfix 清除浮动；

.show/hidden 显示/隐藏；

.invisible 可见；

（2）图片：

.img-rounded 圆角图片；

.img-circle 圆形图片；

.img-thumbnail 缩略图片/镶边的效果；

.img-reponsive 响应式图片；

.img-polaroid ;

（3）文本：

.text-danger/success/warning/info/primary

.bg- danger/success/warning/info/primary 文本的五种背景颜色；

.text-left/right/center/justify 文本的对齐方式；

.text-uppercase/lowercase 文本转大写/小写;

.text-capitalize :首字母大写；

. text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

（4）表单：

.checkbox_inline .radio_inline表示将单/复选按钮由默认的换行显示改成在一行内显示；增加了表单元素样式显示包括字体，大小，颜色对齐等效果；

.form-inline 为form添加了属性表示在屏幕大于768时会显示在一行，否则就让里面的每个元素显示为块级；

.form-horizontal在屏幕大于768时将其表单元素;

.form-group包裹的元素显示为行内显示并且可以使用栅格布局；

如<div class="form-group has-success/warning/error"> //将其包裹为一组，

后面一个属性表示里面文本框和文字的样式；

<input type="text" class="from-control"> 增加边框效果；

</div>

input-sm/lg显示文本框的小/大；

<span class="help-block"></span> 块显示，字体样式增强；

.form-actions :清除浮动；添加样式；

.form-search :

.form-horizontal :

（5）屏幕分类：大型屏幕lg(>=1200),桌面通用屏幕md(1200>x>992),平板 sm(991>x>768),手机xs(x<767);

（6）表格：

.table 该属性优化了表格，否则显示原来的样式；让thead增加了下边框；以及增加了上下边距；以下属性需要在该属性下才叠加显示；

.table-borderd 带边框的表格；

.table-striped 隔行变色的表格；

.table-hover 带悬停表格，背景变成浅灰色；

.table-responsive 响应式表格；父元素上；xs屏幕下回显示一个滚动条；

表格的情景样式，添加在tr、td上：

.table-condensed :

.active 鼠标经过时变浅灰色;

.success 行/列为成功色；

.warning 行/列为警告色；

.danger 行/列为危险色；

.table-condensed :table上属性让表格更加紧凑；

.overflow-y: hidden 响应式表格使用了属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件

（7）栅格系统：

1）布局的三种方式：table/css+div/bootstrap栅格布局；

2）栅格系统：

.container 固定栅格最外层容器;通常960px页面居中显示，如果不写就是满页面的宽度。

.container-fluid 为流式栅格与不写一样满页面宽度；

.row 其次，行一个可以允许有多列,前后插入了table清除浮动；

.col 再次，默认一行平分12等份列；

.col-lg/md/sm/xs-1/2.. 表示不同屏幕下列的占比等份及适用性问题；将决定是水平（堆叠）显示还是换行显示；当其中一列的内容远比其他列内容超出显得格格不如时，需要在这列后额外添加一列.clearfix .visible-xs/.visible-xs-block;表式可以让这列与其前面的列显示一行，其他后面的列换行显示；列嵌套在列col中在嵌套行和列.

.col-lg/md/sm/xs-offset-1/2.. 表示不同屏幕下的列右偏移等份；

.hidden/visible-xs/sm/md/lg 仅在某xs/sm/md/lg屏幕下隐藏/显示该列格；

.col-lg/md/sm/xs-pull/push-1/2 表示在特定屏幕下pull向左拉几格/push向右推几格从而实现列的换位；

列.col里面的的嵌套行（.row）列(.col);

（8）版式：

1）标题：<h#></h#> 或<h#><small>内容</small></h#> ： bootstrap自定义优化了h#，并添加了<small>字体缩小80%；；

2）文本：bootstarp 从重新定位了文本字体的显示大小和样式，增加的了.lead属性表示该文本突出显示并增加上下边距，增加了突出文本的字体大小；

3）文本颜色：

.text-muted :提示，浅灰色；

.text-primary :主要，蓝色；

.text-success :成功，浅绿色；

.text-waring :警告，浅黄色；

.text-info :通知，浅蓝色；

.text-danger :危险，浅红色；

<strong>内容</strong> ：加粗强调内容；

<em>内容</em> ：斜体强调内容；

.hide-text :隐藏文本；

<b></b> :用于高亮显示文字；

<del></del> :效果与<s></s>标签一样；

<ins></ins> :效果与<u></u>标签一样；

.text-overflow :截断太长的文本内容；

<var>变量</var> ：

4）文本对齐：

.text-left :文本左对齐；

.text-center :文本居中对齐；

.text-right :文本右对齐；

5）缩略语：即鼠标经过时弹出完整的信息；

<abbr title="完整的信息内容">缩写的信息内容</abbr>；

6）地址：<address></address>:bootstrap增强了该属性，让字体不在斜体显示，字体更小了，里面的a标记自动清除下划线；

7）引用：<blockqueto></blockqueto>增强了该标签的字体，边距和字体颜色等样式；.blockquero-reverse让文本右对齐；

8）列表：

.list-unstyle :清除了列表样式的左缩进，以及(list-style:none);

.list-inline/inline-block :让列表的列表项显示在一行，而不是垂直显示；

<dl/dt/dd> .dl-horizontal :优化了该标签，不在缩进显示；

9）代码：<code>代码</code> ：增强了该标签，让其红色显示；

<pre>内容</pre> ：增强了该标签的显示文字颜色，以及大小；添加了其向应的.pre-scrollable属性，表示添加了滚动条；

（9）组件：

1）下拉菜单：可以为所有对象/导航条/列表添加下拉菜单；

<div class="dropdown"> //下拉菜单的必须的最外层包含框

<a/button data-toggle="dropdown"/>//第一部分的按钮/ 超链接单击时显示下面菜单；

<ul class="dropdown-menu" />//第二部分具体菜单列表；

</div>

//第二部分具体菜单列表；默认隐藏的；需要被第一部分激活；在里面添加.pull-left/right使其相对于body左/右对齐，其里面的li添加的.disabled禁用属性；li不包含内容添加.divider表示为分割线；li中添加.dropdown-header,标签将该内容颜色灰色，字体减小实现标题的样式；

2）按钮组：

<div class="btn-group"> //表示将div里的元素(都有btn属性)显示为按钮组，

</div>

.btn-group表示将div里的元素(都有btn属性)显示为按钮组；

.btn-toolbar将多个.btn-group包裹在一起形成按钮导航条；

.btn-group默认是水平显示；按钮组；data-toggle="buttons";

.btn-group-vertical表示将里面的按钮垂直显示；

.btn-group-justified表示将里面的按钮水平两端对齐；

.btn-group-lg/sm/xs表示按钮组的大中小号以及默认大写；

.dropup在添加按钮组的元素中添加属性，表示将按钮向上弹出(默认是向下弹出)；

.clearfix:在前后插入table，清除both浮动效果；

data-toggle="button"或$().button()/$().button("toggle");激活按钮；

.btn-link: 按钮链接；<a role="button" class="btn"/> <input/button type="button" class="btn">；

<button><span class="图标"><span> 按钮</button>：按钮和图标；

3）导航组件：

.nav定义了导航条；

.nav-pills/nav-tabs定义了指定了导航条的样式胶囊式/选项卡的样式；

.pull-right/left相对body左/右对齐；

.nav-jusitified为两端对齐；

.nav-stacked表示里面的按钮垂直显示；以及导航组件和下拉菜单的嵌套；

<li class="active"><a href="#p1">首页</a></li> //.active表示被激活状态

</ul>

激活标签页：

<div class="tabbable"> //将导航条和内容放在一个容器里

<ul class="nav nav-tabs"> //定义导航条以及胶囊样式

<li class="active"><a href="#tab1" data-toggle="tab">首页

</a></li> //定义激活按钮

</ul>

<div class="tab-content"> //定义激活内容

<div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div> // tab-pane定义初始隐藏

</div>

data-toggle="tab"或$().tab('show')表示调用tab标签页插件

4）导航条：；.navbar, 包裹1个/多个导航组件（.nav）;

.navbar-default:定义导航条的默认样式多一个下边界线；

.navbar-brand:定义导航条里的元素的为网址广告/标题，禁用，字体凸显的效果；

.navbar-header:定义导航条里的元素头部组；

.navbar-nav/link:定义导航条的里面的导航条组/超链接标签的样式；

.navbar-right/left:定义导航条里面的元素的位置；

.navbar-form/btn/text:定义导航条里面的form标签/按钮标签/文本内容样式；

.form-group:定义表单from里面的一个组；

.form-control:定义表单里面文本框的样式；

.navbar-fixed-top/bottom:定义了导航条固定在顶/底部；

.navbar-inverse:定义了导航条背景样式：

.navbar-static-top:定义了导航条左内边距；

5）面板屑：

.breadcrumd:定义了ul/ol里面的元素水平显示，'/'分割每个li;

.pagination:定义了ul/ol里面的元素实现水平分页按钮的效果；

.pagination-lg/xs:定义了ul/ol分页的大小号；默认是中号；

.pager:定义了ul/ol里面的活动的上一页和下一页，可以定义固定在上/下页位于最左/最右侧，通过为其相应的上下也元素添加.previous/.next;

.label/.label-5种颜色:定义了像标签一页的样式/标签背景颜色；.badge定义了徽

章样式和标签样式差不多；

6）缩微图：

图像占位符：

(1)在线：<img src="http://placehold.it/150x350">;自定义灰色大小占位区域;

(2)holder.js文件： <img data-src="holder.js/150x350">;

缩微图：即弹性图片；

.thumbnails /.thumbnail :分别定义组/单个的缩微图，使得图片响应式，占父元素的100%宽，且带内边框，鼠标悬浮时高亮显示；

7）警告框：

.alert/.alert-5种颜色：表示以下内容为警告框/及警告框的背景字体颜色;

.alert-dismissable该属性表示支持兼容各种浏览器；

.close: 关闭按钮的样式；且a必须href="#";如果是button必须type="button";

.data-dismiss="alert":定义关闭按钮的关闭的行为，alert表示关闭当前alert；或在js中$().alert("close")也可定义关警告框行为；on('close/closen.bs.alert',handder)分别标签在警告框关闭前/关闭后触发的事件;

.alert-link:在警告框里的链接必须添加该属性实现跳转；

8）进度条：

.progress:定义父元素的为整个精度条的外框；

.progress-striped:定义父元素上表示子元素的斑马条纹颜色；

.active:定义父元素上表示子元素的背景是活动的；

.progress-bar:定义子元素上表示进度，通过style中width=n%;表示其进度；

.progress-bar-5种颜色：定义子元素的背景颜色；

9）媒体：

.media:定义在外包含框中，实现图文混排；也可定义正文的主体内容；

.media-object:定义了里面的元素为媒体/图片对象；

.media-body:定义了里面元素为正文部分；

.media-heading:定义了正文的标题；

.media-list:媒体列表，包含多个.media;

.jumbotron:大屏幕区域，带宽/高灰色背景，常用与凸显标题或广告区域；

.page-header:网页标题区域；

10）列表组：

.list-group:优化了ol/ul列表组；

.list-group-item:优化了li列表项字体，行间距；

.list-group-item-heading/text:定义列表标题/内容；

11）面板：

.panel: 定义面板组；

.panel-group:折叠面板组，包含多个面板；

.panel-5种颜色: 定义面板组的颜色；

.panel-heading:定义面板子元素标题；

.panel-body:定义面板子元素正文部分；

.panel-title:定义面板.panel-heading/body/footer子元素的子元素预定义标题；

.panel-footer:定义面板子元素的角部分；

表格/列表嵌套在面板中；.well/.panel都可以作为容器，且效果相识，但是.well使用范围比较窄；.well-sm/lg；

12）文本框的修饰：

.input-group: 将input和span提示标签作为一个组；

.input-group-lg/sm:定义这个组为大小号；

.input-group-addon:在span中添加这个属性表示将span的内容与input显示一行且衔接捆绑在一起；.input-group-btn添加在span中在span里添加一个按钮标签，就可以将按钮标签与input捆绑一行了，如果不是添加按钮标签，是添加下拉菜单也可组合起来并和input在一行显示；

.form-control:添加在input中修饰文本框的样式；

.input-block-level:表示显示为block，且border-box;

13）字体图标：.glyphicon .glyphicon-search/等图标样式;

7.BOOSTRAP插件：

（1）定义模态框：通过a标签的href="#id"或button的data-target="#id"跳转到模态对话框，a/button的data-toggle="modal" 定义跳转的结果是模态对话框；

.modal:定义模态对话框的最外层容器；

.modal-dialog：定义是模态对话框；

.modal-content:定义模态对话框的内容；

.modal-header/body/footer:定义模态对话框的头/主体/角部分；

.data-dismiss="modal":定义关闭当前模态对话框的行为；

（2）调用模态对话框：按钮或a中添加data-toggle="modal" 并通过href或data-

target确定要调用的模态对话框的id；或$elem1.click(function($().modal

(['toggle'/'show/'hidden'])))脚本调用；

（3）模态对话打开关闭触发的事件：

on('show/shown/hide/hidden.bs.modal',handder)分别标签在模态对话框打开前/打开后/关闭前/关闭后触发的事件;

（4）调用下拉菜单：data-toggle="dropdown"或$().dropdown(['toggle']);

（5）下拉菜单显示隐藏触发的事件：

on('show/shown/hide/hidden.bs.dropdown',handder)分别标签在下拉菜单显示前/显示后/隐藏前/隐藏后触发的事件;

（6）滚动监听：根据滚动的位置自动更新导航条的位置；data-spy="scroll"或$().scrollspy()启动滚动监听；data-target="#id"或href="#id"指定滚动的标签元素；data-offset="30"表示滚动的偏移位置范围内就会触发滚动；也可指定为body里的滚动监听；on('activate.bs.scrollspy',handder)表示滚动到某个元素时触发的事件；

（7）激活标签页：

<div class="tabbable"> //将导航条和内容放在一个容器里

<ul class="nav nav-tabs"> //定义导航条以及胶囊样式

<li class="active"><a href="#tab1" data-toggle="tab">首页

</a></li> //定义激活按钮

</ul>

<div class="tab-content"> //定义激活内容

<div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div> // tab-pane定义初始隐藏

</div>

data-toggle="tab"或$().tab('show')表示调用tab标签页插件；

on('show/shown.bs.dropdown',handder) 分别当前标签之前一个标签/当前标签页触发的事件;

（8）提示工具；即鼠标经过时弹出的提示信息；

标签的的title="需要提示的内容"，然后 $().mouseover($().tooltip

("show"))即可,为该标签添加data-placement="top/right/left/bottom"可以定义显示的位置；on('show/shown/hide/hidden.bs.tooltip',handder)分别标签显示前/显示后/隐藏前/隐藏后触发的事件;

（9）弹出框： <ANY data-placement="top/bottom/left定义弹出框相对ANY元素弹出的位置" title="这里是弹出框的标题" data-content="这里是弹出框弹出的正文内容"> ；$("ANY").popover()这是js脚本（不需要click）才能触发调用弹出框；on('show/shown/hide/hidden.bs.popover',handder) 分别标签显示前/显示后/隐藏前/隐藏后触发的事件;

（10）折叠面板：on('show/shown/hide/hidden.bs.collapse',handder) 分别折叠面板显示前/显示后/隐藏前/隐藏后触发的事件;通过data-toggle="collapse" 且data-target="#id"或$().collapse(["toggle"])触发折叠面的显示隐藏事件;

（11）轮播插件：

.carousel :定义轮播插件的外框有三部分组成；

.carousel-indicators:第一部分定义轮播的图标容器：

.carousel-inner：第二部分定义轮播的项目容器；

.item: 定义轮播项目包含图片和文字内容；

.carousel-caption:定义项目里文字的标题，内容部分；

.carousel-control:第三部分定义轮播的控制按钮；.left/.right定义其在图片的左边还是右边；

data-slide="prev/next":定义了调用轮播向前/后滑动；或通过data-slide-top="0/1/2":定义图标滑动顺序,样式默认是小圆，调用轮播；或通过$().carousel(["prev/next"]);

on('slide/slid.bs.carousel',handder)分别标签滑动前/滑动后触发的事件;