zoukankan      html  css  js  c++  java
  • bootstrap自学总结不间断更新

    2.栅格系统

             container-fluid 自适应宽度100%

             container 固定宽度(适应响应式)

                       屏幕宽度=x     x>=1200            1170

                                         992<=x<1200   970

                                         768<=x<992     750

                                         x<=768              auto

             注意这俩个class不能放在一起,也就是说不能相互嵌套

             如果不想让宽度随着屏幕而变化,可以给他一个!important来提高优先级这样在所有尺寸下都是一个值

    3.栅格布局

             row  代表一行,并且自带清除浮动

             col-lg/md/sm/xs 代表列

             数字         不能超过12,

                       如果列的和超过12,那就会换行

                       如果一列数字超过12,那就按12显示

    4.屏幕尺寸

             lg      宽度>1200

                       表现形式:并木的宽度大于1200,一行显式n列

                                屏幕的宽度小于1200,一行显式一列

             md   宽度大于992小于1200同理       

             sm    宽度大于768小于992同理

             xs     跨度小于768 一行永远显示n列

            

    5.列偏移

    col-lg-offset-(偏移的格子数量)

    当偏移的格子数量超过12时会不起作用

    ------------------------------------------

    6.列排序与嵌套

    列排序

    col-lg-push-10  列往右走

                       push 往右走

                       数字 往右走的格子数

                       数量超过12时会不起作用

    col-lg-pull-10  列往左走

                       pull 往左走

                       数字 往左走的格子数

                       数量超过12时会不起作用

             列偏移与列排序的区别

             1.列偏移只能向右走,列排序可以向右走也可以向左走

             2.当offset偏移后其位置超过12列,则会跳到下一行在下一行进行相同的偏移。而push不会换行。

    嵌套        

             每一列里都可以嵌套一行和最对12列,嵌套的元素以父级的宽度为基准,在分12个格子。

    ------------------------------------------

    7.特殊标签以及样式

    ------------------------------------------

    8.表格相关样式

             table table-triped table-bordered table-condensed table-hover

             table-responsed

             active success warning danger info

    ------------------------------------------

    9.表单

             form-control form-inline form-group form-horizontal control-label checkbox checkbox-inline rodio-inline

    12.按钮

             <button type="button"></button>

             <a href="#"></a>

             尺寸和颜色

             class="btn btn-default btn-lg"

             class="btn btn-primary btn-md"

             class="btn btn-success btn-sm"

             class="btn btn-info btn-xs"

            

             让按钮宽度变为100%,并成为块级元素

             btn-block

            

             让按钮成为激活状态,就是有一个内影。

             active

            

             让按钮成为激活状态,就是有一个内影。

             disabled

             关闭按钮

             <button class="close">&times;</button>

    13.响应式图片

             img-responsive         响应式图片

             img-rounded    图片变成有小圆角

             img-circle          裱成圆形

             img-thumbnail 带圆角边框

    14.辅助类样式

             字体颜色

             text-muted       变成微灰色

             text-primary    变成淡蓝色

             text-success    变成绿色

             text-info   变成深蓝色

             text-warning    变成橘黄色

             text-danger      变成红色

            

             字体的背景

             bg-primary

             bg-success

             bg-info

             bg-warning

             bg-danger

            

             三角符号

             caret        

            

             左浮动

             pull-left

            

             右浮动

             pull-right

            

             居中对齐

             center-block

             隐藏于显示

             show

             hidden

             invisible

    15响应式工具

             针对不同的宽度,展示或隐藏相关内容

             visible-lg/md/sm/xs-block/inline-block/inline

             hidden-lg/md/sm/xs-block/inline-block/inline

    16.打印样式

             <只>在打印的时候显示

             visible-print-block/inline/inline-block

             打印的时候隐藏    

             hidden-print-block/inline/inline-block

             注意:

                      

    17.按钮组

             btn-group         按钮组

             btn-group-lg/md/sm/xs   改变按钮的尺寸    

             btn-group-vertical 按钮竖着排

             btn-group-justified  让按钮俩端对其

                       注意:如果btn-group-vertical的子元素如果是button标签或者是input标签需要加一个带btn-group的div,不然会出问题。不过a标签就不会。

             给按钮添加三角形

              <a href="#" class="btn btn-primary">按钮<span class="caret"></span></a>

             dropup     倒置三角也就是变成上拉菜单。

    18.下拉菜单

             1.给父级添加一个dropdown,或者给父级添加定位属性

             2.给button添加一个data-toggle="dropdown"的属性,并且加一个dropdown-toggle的class

             3.ul需要添加一个dropdown-menu的class

    19.下拉菜单样式

             open:默认菜单时展开的,给dropdown添加

             pull-right/left

             btn-block:让btn铺满。

             dropup:让菜单在上面显式。

             dropdown-header:菜单里的标题,给li添加

             text-center:居中

             divider:分割线

             disabled

    20.导航

             nav   导航的基础样式

             nav-tabs  table标签页

             nav-pills   胶囊式

             nav-stacked     让导航竖着排并沾满基于pills

             nav-justified     一行铺满基于pills

    21.选项卡

             1.导航对应的所有内容需要放到一个class为tab-content的层理面

             2.每一个内容块都要加上一个名为tab-pane的class,并且给对应的默认显示的内容添加一个active的class

             3.给每一个导航的a标签加一个data-toggle="tab"

             4.给每一个内容添加一个id

             5.给每一个导航的a标签添加一个锚点。

    22.导航条

             navbar      导航条的基础样式,给nav标签

             nav navbar-nav       导航条里菜单的固定样式组合class,给ul标签

             navbar-default          导航条的默认样式,给nav标签          navbar-inverse         与navbar-default相对,它是黑色的样式。

             navbar-static-top     使导航条变成直角,给nav标签

             navbar-fixed-top/bottom         使导航条固定在窗口上,给nav标签,需要给body设一个padding,让出上面的位置。

            

             navbar-header          导航的头部,一般情况下来访logo,作为a标签的外包div

             navbar-brand   用来放logo的,给a标签用需要配合navbar-header来使用。

             注意:需要把nav标签放在container的外面。防止在缩小页面的时候会出现变长的情况。

             navbar-left:表示内容左对齐

             navbar-right:表示内容右对齐

             navbar-link:针对导航条中的链接,让链接中的文字颜色变得和导航颜色一致。给a标签使用

             navbar-text:在导航当中加入一段文字,但是文字没有垂直居中,这时候使用它。用于a,p标签

             navbar-btn:如果导航里只有一个按钮,那给他加一个navbar-btn,才能使他居中。

             注意:如果导航中有form,那就需要给form添加一个navbar-form,想让他们在一行显示,就要添加一个navbar-left

    23.路径导航与分页

             breadcrumb:面包屑导航,给ul标签呈现htmlcssjs这种样式。

              分页:

                       pagination:给ul标签pagination-lg/md/sm,没有xs的。

              翻页:

                       pager:给ul标签

                                &larr;上一页&rarr;下一页                       previous:在右侧,表示上一页,给li

                       next:在左侧,表示下一页,给li

    24.标记与巨幕

             标记:

                       badge:有一个背景色,用于数字,给span标签

             巨幕:

                       jumbotron:有巨大的背景图,和导航一样,如果想让巨幕铺满整个屏幕,让jumbotron在container外面就行了。用于div

    25.缩略图与警告框

             缩略图:

                       thumbnail:给a标签,一般是a中有一个很大的img,用过之后给图片加上圆的白色边框和边距。

                       caption:给div,可以加一些内边距。

             警告框:alert:给p标签使用,加背景颜色用alert-success/info/warning/danger

                       <button class="close" data-dismiss="alert">&times;</button>

    26.进度条

             progress:外面的div用

             progress-bar:里面的div用,但是需要给他一个宽度,progress-bar-info/warning/success

                       注意:想有动态的进度条给里面的div加progress-bar-striped(这是一个样式)和active就ok了。

    27.图文混排

             media       图文混排 外层div

             media-left         图片在左侧显示 带img的a标签

             media-right      图片在右侧显示     带img的a标签

             media-middle  图片垂直中间对齐 带img的a标签  

             media-bottom 图片垂直底部对齐  带img的a标签

             media-body      内容区域

             media-heading         内容区域的标题黑h1等标签使用。

    28.列表组

             list-group:列表组,给ul添加

             list-group:列表项,给li添加

             注意:给每个列表项添加一个标记,那这个标记就会自动跑到右侧。

             用a标签做的列表组,可以添加激活状态,禁用状态,背景色都可以添加

             添加标题与段落的列表组

                       列表则标题:list-group-item-heading

                       列表组内容:list-group-item-text

    29.面板

             panel:面板

             panel-heading:面板的头部

             panel-body:面板的内容

             panel-default:面板默认样式

             panel-title:面板头部区域标题的样式

             panel-primary:蓝色的头部

             panel-success:绿色的头部

    30.弹出层

             注意:

             1.弹出层必须放在body里

             2.弹出层里面不能在嵌套别的层

             3.弹出层出来以后,页面的滚动条会被覆盖。

             结构

             modal弹出层父级

             modal-dialog弹出层

             modal-content弹出层内容区域

             modal-header弹出层头部

             modal-body弹出层主体

             modal-footer弹出层底部      

             fade 让弹出层有一个运动的效果,给modal添加

             modal-lg/md/sm/xs是用来设置弹出层的尺寸,他必须给modal-dialog的层。

    31.滚动监听

             1.谁要滚动就要给他添加data-spy="scroll"

                       并且需要添加一个data-target,这个值要与导航的父级相关联

             2.给导航的父级添加一个id或者class,要与要滚动的元素的data-target相关联,并且要添加一个navbar-collapse

             3.导航里面的每个a标签都需要添加上一个锚链接,这样的话,才能与滚动对上号。

             4.果冻区域的内容的标题要添加上相应的id,用于导航的锚链接对应。

    32.提示标签

             a标签class='tool' data-placement='left/right/botton/top' title='要显示的内'

             js

             $('.tool).tooltip();

             $('.tool).tooltip('show');想让他之前就显示出来

    32.提示框       

             1.给要点击的那个元素添加一个data-toggle=‘collapse’,并且需要给他添加一个data-target,让他的值与对应的内容区域的id或者class相同

             2.给对应的内容区域加一个id或者class,与点击的元素相对应   

             3.注意

                       1.内容区域不能有padding的值,

    33.提示框组

             1.把所有的面板都放在一个父级里,并且给父级添加一个panel-group,还有一个id

             2.给药电机的元素添加一个data-parent属性,并让他的值与父级的id一样

             3.需要给内容区域添加一个class为collapse

  • 相关阅读:
    structs2---OGNL表达式
    六种获取配置properties文件的方法
    java poi导出Excel 总结
    Linux中发布项目的一些命令笔记
    JavaScript 闭包
    常见数据库连接方式
    Docker(五):镜像
    Docker(四):docker的安装
    Ubuntu命令
    Docker(三):Docker的基本概念
  • 原文地址:https://www.cnblogs.com/iwebkit/p/6259858.html
Copyright © 2011-2022 走看看