Bootstrap基础入门

一、Bootstrap简介

二、排版属性

三、布局模式

四、媒体查询

五、栅格系统

---

---

一、Bootstrap简介

         bootstrap:全球最受欢迎前端组件库，用于开发响应式布局，移动设备优先的WEB项目。
         bootstrap是一套用于HTML、CSS和JS开发的工具集。利用我们提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大的插件系统，能快速的为你的想法开发出原型或构建整个app。

二、排版属性

.lead	使段落突出显示
.small	设置小文本为父文本的85%大小
.text-left	设定文本左对齐
.text-center	设定文本居中对齐
.text-reght	设定文本右对齐
.text-justify	设定文本对齐,-中段落超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在<abbr>元素中的文本以小号字体显示，且可以将小写字母转换为大写字母
.blockquote-reverse	设定引用右对齐
.list-inline	将所有列表项放置同一行
.dl-horizontal	该类设置了浮动和偏移，应用于<dl>元素和<dt>元素中
.pre-scrollable	使<pre>元素可滚动，代码块区域最大高度为340px，一旦超出这个高度，就会在y轴出现滚动条

三、布局模式

1. 布局模式：固定布局、流动布局

固定布局：container（设置设备优先，有不同的分辨率下的情况，适应各种屏幕）

流动布局：container-fluid
注：开发时一般会利用
padding-right:-15px和padding-left:-15px-去掉固定布局的padding-right:15px和padding-left:15px

四、媒体查询

1.媒体查询：可应用于不同屏幕分辨率下的框架显示模式(pc端、移动端)

2.实例

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .block{
            width: 100%;
            border: 1px solid black;
            height: 200px;
            box-sizing: border-box;
            margin: auto;
        }
        @media (max-width: 1200px) and (min-width: 993px) {
            .block{
                width: 1140px;
            }
        }

        @media (max-width: 992px) and (min-width: 769px) {
            .block{
                width: 980px;
            }
        }

        @media (max-width: 768px) and (min-width: 577px) {
            .block{
                width: 750px;
            }
        }
        @media (max-width: 576px) {
            .block{
                width: 560px;
            }
        }
</style>

 五、栅格系统

<1>栅格系统工作原理：
1.容器提供了一种中心和水平填充站点内容的方法。使用.container应答像素宽度或.container-fluid，用于width:100%在所有视窗和器件尺寸
2.行是列的包装器。每列都有水平padding，用于控制他们之间的空间。
3.在网格布局中，内容必须放在列中，只有列可以是行的直接子项。
4.由于flexbox，没有指定的网格列width将自动布局为等宽列。
5.列widths以百分比形式设置，英雌它们总是相对于其父元素是流动的和大小的。
6.列具有水平padding创建单独的列之间的排水沟，但可以删除行中margin,列中padding，.row上.no-gutters
7.为了使网格响应，有5个网格断点，每个响应断点一个：超小、小、中、大和超大
8.网格断点基于最小宽度的媒体查询，这意味着它们适用于那个断点以及它上面的所有断点
9.可以使用预定义的网各类或Sass mixins进行更多语义标记

<2>理解

1.网格系统/栅格系统：网格系统类似于标签table中的tr、td
分为行row 和列col-*-*
2.网格系统一行最大12个列，多出的列会自动折行，为flex布局

3.网格类似于  table tr  td
4.col-xl-auto  根据内容自动分配
5.col-*-num  列  后边的代表跨几列
6.offset-1  设置marginleft  8.333%
7.offset-*-2  不同的屏幕marginleft
8.invisible  隐藏元素，visible  显示元素
9.p-0  padding:0，p-1 padding:0.25rem;
10.w-100 100%，w-75 75%
11.h-100 100%，h-50 50%
12.align-items-center  相对父容器垂直居中，align-items-start 相对父容器顶部对齐，align-items-end  相对父容器底部对齐，align-content-center  考虑多行，align-self-center  自身在flexbox中的y轴分布

13.justify-content-center  子元素在父容器里面的x轴的排布情况

	超小<576px	小>=576px	中等>=768px	大>=992px	超大>=1200px
最大容器宽度	无（自动）	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数	12
天沟宽度	30px(每列15px)
嵌套	是
列排序	是

 注：sm:小屏，md:中屏，lg：大屏，xl:超大屏

<3>实例

<div class="row tb_row">
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">1</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">2</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">3</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">4</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">5</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">6</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">7</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">8</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">9</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">10</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">11</div>
        <div class="col-sm-1 col-lg-1 col-md-1 col-xl-1">12</div>
</div>

效果：