Bootstrap知识点笔记

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

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

2.响应式网页必备：

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

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

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

3.如何编写响应式网页：常用meta设置横竖屏幕，以及禁止识别电话邮箱;  识别电话邮箱拨打110，发送邮箱；清除页面自带的滚动，由内容决定滚动，body,html{height:100%,overflow:hidden},移动端开发时，width值为百分比，高度为px具体值；

    （1）声明viewport视口，;

            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文件：如；

    （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   关闭；如X;                .caret   小三角；如;                .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包裹的元素显示为行内显示并且可以使用栅格布局； 如 "form-group has-success/warning/error">  //将其包裹为一组，                                           后面一个属性表示里面文本框和文字的样式；     用户名：     from-control"> 增加边框效果； input-sm/lg显示文本框的小/大； help-block">  块显示，字体样式增强；                 .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）标题： 或内容  ： bootstrap自定义优化了h#，并添加了字体缩小80%；；

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

        3）文本颜色：      

.text-muted   :提示，浅灰色； .text-primary :主要，蓝色； .text-success :成功，浅绿色； .text-waring  :警告，浅黄色； .text-info    :通知，浅蓝色； .text-danger  :危险，浅红色； 内容   ：加粗强调内容； 内容            ：斜体强调内容； .hide-text    :隐藏文本；         :用于高亮显示文字；     :效果与标签一样；     :效果与标签一样； .text-overflow  :截断太长的文本内容； 变量  ：

        4）文本对齐：

            .text-left   :文本左对齐；

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

            .text-right  :文本右对齐； 

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

           "完整的信息内容">缩写的信息内容；

        6）地址：

:bootstrap增强了该属性，让字体不在斜体显示，字体更小了，里面的a标记自动清除下划线；

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

        8）列表：

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

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

          

    .dl-horizontal   :优化了该标签，不在缩进显示；

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

                 

内容

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

    （9）组件：

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

                   

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

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

                       

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

                   

 

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

            2）按钮组：

   

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

       

按钮1(p)

       

按钮2(li)

        按钮3(a)

        按钮4(span)

   

                 

.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: 按钮链接； ； 图标"> 按钮：按钮和图标；

 

            3）导航组件：

.nav定义了导航条； .nav-pills/nav-tabs定义了指定了导航条的样式胶囊式/选项卡的样式； .pull-right/left相对body左/右对齐； .nav-jusitified为两端对齐； .nav-stacked表示里面的按钮垂直显示；以及导航组件和下拉菜单的嵌套；

nav nav-pills">  

   

• "#p1">首页
//.active表示被激活状态

    

• 导航标题1

   

• 导航标题2

激活标签页： tabbable">  //将导航条和内容放在一个容器里       //定义导航条以及胶囊样式         #tab1" data-toggle="tab">首页                             //定义激活按钮         微客         微博            //定义激活内容         tab-pane active" id="tab1">   // tab-pane定义初始隐藏                              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)在线：;自定义灰色大小占位区域; (2)holder.js文件： ; 缩微图：即弹性图片； .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）激活标签页：

tabbable">  //将导航条和内容放在一个容器里       //定义导航条以及胶囊样式         #tab1" data-toggle="tab">首页                            //定义激活按钮         微客         微博            //定义激活内容         tab-pane active" id="tab1">   // tab-pane定义初始隐藏                             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").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)分别标签滑动前/滑动后触发的事件;