bootstrap教程

「爱情、让人受尽委屈。」 2021-09-20 03:42 591阅读 0赞

**一、栅格系统**  
1、容器：包含两种容器，

*  流体容器：container-fluid，宽度始终为100%( 但是两边有padding )
 *  container：固定宽度的容器，有固定、1170、970、750、auto等选项，
 *  屏幕宽度<768，container宽度auto
 *  屏幕宽度768~992，container宽度750
 *  屏幕宽度992~1200，container宽度970
 *  屏幕宽度>1200，container宽度1170

2、数据行(.row)必须包含在容器中，在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数12，具体内容应当放置在列容器（.column）之内，而且只有列（.column）才可以作为行容器(.row)的直接子元素  
col-lg-*、col-md-*、col-sm-*、col-xs-*

每个类名，都代表在该屏幕大小下才起作用

<div class="col-lg-6">
            col
            <p><img width="100%" src="src/img/b.jpg" alt=""></p>
    </div>
    <div class="col-lg-6">
            col
            <p><img width="100%" src="src/img/b.jpg" alt=""></p>
    </div>
    //只有在大屏幕下，才会排成一行，其他屏幕下，就当做col-lg-6这个类名没有生效，因为是div，独占一行，所以肯定就排2行了

满足条件的时候，每个div永远都是水平排列的，如果不满足条件了，就代表类名没有生效，因为是div，独占一行，所以肯定就依次往下排了  
理解：每个div，上面的数值是几，就代表其占据了多少的空间，比如  
.item1的div，  
col-lg-3：在大屏幕，占据3块，即屏幕的四分之一  
col-md-6：在中等屏幕，占据6块，即屏幕的二分之一  
col-sm-12，col-xs-12：在小或超小屏幕，占据12块，即占据一整个屏幕，在这种屏幕下，其他的都得往下面排

3、  
列偏移：只能往右偏  
col-\*-offset-n：div向左偏移n个网格单位，（1<= n <=12）

列排序：push往右偏，pull往左偏

加上push、pull，效果相当于二者换了个位置

4、row可以嵌套，子级就以父级宽度为总宽度，然后再以12个网格平均分配

5、遇到网格高度不一样，排列不均匀，可以在需要的地方清除浮动：  
![bootstrap教程][bootstrap]  
<div class="clearfix"></div>  
![bootstrap教程][bootstrap 1]  
注意点：一个页面中，可以有多个容器，比如头部导航是100%宽度，就使用container-fluid；中间内容区域为固定宽度，就使用container；但是容器之间最好不要有嵌套 关系，比如container里面嵌套container

**二、响应式工具**  
在不同的设备上，页面要展示的内容也不一样，电脑上展示的就多，手机上展示的就少，适当取舍；  
比如右侧的导航菜单，大屏幕显示，小屏幕隐藏  
概念：针对于不同设备展示或隐藏页面的内容

*  可见类：visible-a-b  
    a：lg md sm xs  
    b：block inline inline-block  
    举例：  
    <div class="col-lg-6 visible-lg-block"> col-lg-6 </div>  
    表示：在大屏幕上，div才显示，且以block的块级元素形式显示，否则都不显示
 *  隐藏类：hidden-a  
    a：lg md sm xs  
    举例：  
    <div class="col-lg-6 hidden-xs hidden-sm"> col-lg-6 </div>  
    表示：在手机屏幕或上小屏幕上，div隐藏，其他情况都显示
 *  打印类：visible-print-\* hidden-print  
    只有在打印页面时，才会显示或者隐藏页面的某部分内容

**三、Glyphicons字体图标**  
好处：减少请求、容易控制样式  
用法：font-face、字体路径

**四、预定义样式风格**，  
包括按钮btn-、弹框alert-、面板panel-、背景相关bg-、文字颜色text-

*  primary：首选项
 *  success：成功
 *  info：一般信息
 *  warning：警告
 *  danger：危险

<button type="button" class="btn btn-primary">button</button>
    
    <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <strong>Title!</strong> Alert body ...
    </div>
    
    <div class="panel panel-danger">
                <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                            Panel content
                </div>
    </div>
    <p  class="bg-primary">一行段落</p>
    <span  class="text-primary">文字颜色</span>

以上的样式分格，可以应用到所有的标签上，比如a标签

**四、大小**  
\-\[ lg、sm、xs \]：包括按钮、输入框等都可以应用此类来控制大小，这种大小和屏幕尺寸有关系；大的屏幕用大的按钮，小的屏幕用小的按钮

btn-lg、btn-sm、btn-xs  
    <input type="button" class="btn btn-primary btn-lg "  value="按钮">
    input-lg、input-sm、input-xs
    <input type="text" class="form-control input-lg "  placeholder="用户名">

**五、按钮**  
基类：btn  
样式：btn-default（默认） btn-link（链接）  
大小：btn-\[ lg、sm、xs \]  
状态：active、disabled  
种类：a input button，这三种可以用于按钮制作【推荐使用button来写按钮】

//input按钮文字写在value里，button和a写在标签里
    <input type="button" class="btn btn-primary btn-lg "  value="按钮">
    <a href="#" class="btn btn-primary btn-lg ">按钮</a>
    <button class="btn btn-primary">按钮</button>

块级：btn-block，按钮默认是行内元素，加上这个就变成块级元素，适合在移动端使用  
按钮组：

*  btn-group：改为按钮组，按钮之间没有间隙
 *  btn-group-justified：横向按钮组，默认，需要配合btn-group使用
 *  btn-group-vertical：纵向按钮组，此时不需要再加btn-group
 *  btn-group-\[ lg、sm、xs \]：大小改变  
    按钮上面加箭头：使用类名caret
    
        <a href="#" class="btn btn-primary">按钮 <span class="caret"></span> </a>
        <button class="btn btn-primary">按钮 <span class="caret"></span> </button>
        input不行
    
    ![bootstrap教程][bootstrap 2]

箭头向上：

<div class="btn-group dropup"> // 添加类名dropup
            <button type="button" class="btn btn-primary">按钮1 <span class="caret"></span></button>
    </div>

![bootstrap教程][bootstrap 3]

**六、下拉菜单**  
属性：  
data-toggle="dropdown"（js交互操作）不单单是下拉菜单，别的组件也是如此，比如选项卡：data-toggle="tab"  
aria-（针对特殊人群）  
role（针对特殊人群）  
open  
dropdown-menu-right：加在dropdown-menu上，可以使得下拉菜单靠右  
dropdown-header  
divider  
实现下拉菜单：三个class+data-toggle="dropdown"  
三个class：父级dropdown，触发按钮dropdown-toggle，下拉菜单内容dropdown-menu  
触发按钮上加上data-toggle="dropdown"  
默认下拉框

<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button"" data-toggle="dropdown">
                    Dropdown<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
            </ul>
    </div>
    
    <div class="dropup">
         <button class="btn btn-default dropdown-toggle" type="button"
        data-target=".dropdown"
      data-toggle="dropdown">
                    Dropdown
                    <span class="caret"></span>
            </button>
            <ul class="dropdown-menu"> 
                    <li class="text-center"><a href="#">Action</a></li>
                    <li class="text-center"><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Separated link</a></li>
            </ul>
    </div>
    $("#drop2").on("shown.bs.dropdown",function(){
                alert(1)
        });

不仅仅是button可以做下拉菜单，a标签也可以，只要加上了data-toggle="dropdown"

下拉菜单的展开隐藏，可以通过标签上写：data-toggle="dropdown"控制，也可以通过写js控制  
比如：  
$(".dropdown-toggle").dropdown(); //也可以控制下拉菜单的显示，但是不能隐藏，这是区别，注意！！  
其他的，比如选项卡，用js控制的话都是类型的原理：方法名和自定义属性名一样  
标签：data-toggle="tab"  
js：$(".nav-tabs").tabs();  
【注意点】用js控制多个下拉菜单，彼此之前不互相影响，然后再借用js，就可以做到显示隐藏，且多个下拉框之间互不影响；  
但是用标签来写，彼此之间会有影响，且点击一个下拉框，会默认把其他的下拉框都隐藏，只显示当前点击的那个

data-target=".dropdown"  ：指定哪些元素参与控制
    $(".dropdown").on("show.bs.dropdown",function(){
            alert(1)
    });
    $(".dropdown").on("shown.bs.dropdown",function(){
            alert(1)
    });
    $(".dropdown").on("hide.bs.dropdown",function(){
            alert(1)
    });
    $(".dropdown").on("hiden.bs.dropdown",function(){
            alert(1)
    });

**七、选项卡**

头部：

*  nav+nav-tabs：这两个必须得加，构成默认选项卡
 *  nav-justified：选项卡等分父级宽度
 *  nav-tabs-justified：选项卡下面的线和选项卡原本的宽度一致，不会和父级宽度一致
 *  nav-pills：面包屑选项卡
 *  nav-stacked：竖状菜单栏，和nav-pills一起使用
 *  带下拉菜单的头部  
    内容：
 *  tab-content：选项卡内容区
 *  tab-pane：每个选项卡块的内容
 *  data-toggle="tab"：选项卡头部导航都得加上这个
 *  href对应id：头部对应内容切换
 *  淡入淡出方式：当前active选中的加上fade in，未选中的加上in
 *  鼠标移入方式

带下拉菜单的切换

**八、导航条**  
基类：navbar  
navbar-default  
nav navbar-nav  
navbar-inverse  
navbar-static-top：去掉两边圆角  
navbar-fixed-top：固定在头部  
navbar-fixed-bottom：固定在底部  
遮挡内容的问题：给body加上margin-top即可

navbar-header  
navbar-brand：网站logo，可以是文字或者图片  
navbar-left：导航菜单靠左  
navbar-right：导航菜单靠右  
navbar-btn：按钮在导航条里面上下居中  
navbar-link：链接在导航条里面上下居中  
navbar-text：文字在导航条里面上下居中  
navbar-form

带下拉菜单的导航条  
响应式导航条：  
navbar-toggle  
collapse  
navbar-collapse  
滚动监听  
data-spy  
data-target  
data-offset：监测走到距离顶部多少距离还是发生改变  
举例：监听body，页面走到哪里，导航条随之改变对应的导航  
body\{ position:relative; \}  
.section\{padding-top:50px;\}  
<body data-spy="scroll" data-target="\#myNavbar" data-offset="50"></body>  
导航条的导航里面的a标签的href值对应，页面内容区域的id

**九、各个组件**  
1、bs3-thumbnail:content  
缩略图：  
![bootstrap教程][bootstrap 4]

2、bs3-alert-success  
警告框：可以用于在填写表单时的提示信息，填写是否符合要求  
![bootstrap教程][bootstrap 5]

3、bs3-media  
媒体对象  
左右对齐结构，左边图片右边文字或者左边文字右边图片，可以用于构建新闻，不仅仅是图片，可以是视频等等，文字也可以带有标题，类似于新闻标题  
![bootstrap教程][bootstrap 6]

4、bs3-list-group  
列表组  
和表格不一样，只有表格的一列，用于显示一列数据  
![bootstrap教程][bootstrap 7]

5、徽章  
![bootstrap教程][bootstrap 8]

6、bs3-panel-success  
面版  
可以带有头部、内容区、底部

**十、零碎知识点**  
1、  
左浮动：pull-left；  
右浮动：pull-right；  
固定定位：affix；  
居中：

*  加类.text-center（子元素居中）
 *  加类.center-block（自身居中）
 *  利用bootstrap中列偏移的概念。例如：col-md-offset-2(外边距向右偏移两列)

2、在容器里面，

bar所在的div不能和右边重合，会有padding值，解决办法：  
放进row里面或者拿出container，即：

<div class="container">
            <div class="row">
                    <div class="bar pull-right">bar</div>  //放进row里面
            </div>
    </div>
    <div class="bar pull-right">bar</div>  //拿出container外面

完整的选项卡代码
    <div role="tabpanel">
            
            <ul class="nav nav-tabs">
                    <li class="active">
                            <a href="#home" data-toggle="tab">home</a>
                    </li>
                    <li>
                            <a href="#tab" data-toggle="tab">tab</a>
                    </li>
            </ul>
            
            <div class="tab-content">
                    <div class="tab-pane active fade in" id="home">home的内容</div>
                    <div class="tab-pane in" id="tab">tab的内容</div>
            </div>
    </div>
    
    $("#myTabs a").mouseover(function(){
            $(this).tab("show");
    });

转载于:https://blog.51cto.com/9161018/2343238

[bootstrap]: https://s1.51cto.com/images/blog/201901/16/e8e6cca9d3986ce9125250076aed3470.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 1]: https://s1.51cto.com/images/blog/201901/16/a4667fc55a8ec9298cffd08080634ab7.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 2]: https://s1.51cto.com/images/blog/201901/16/fd6763b2b006ac3e8bd08f5d5ee71444.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 3]: https://s1.51cto.com/images/blog/201901/16/d01e7a262674a4806b80123bbece6bde.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 4]: https://s1.51cto.com/images/blog/201901/16/d10d3f7176f0fa5f656a57385f0ad3bf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 5]: https://s1.51cto.com/images/blog/201901/19/3b58290f3a2e41197efa7532374bc290.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 6]: https://s1.51cto.com/images/blog/201901/19/f192fbc46169945c0bb793d185980c2f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 7]: https://s1.51cto.com/images/blog/201901/19/3c540eb47c48e363bf46329a3cf47e99.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[bootstrap 8]: https://s1.51cto.com/images/blog/201901/19/94e9e523d68a11c571268c5435b8aeb2.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=