Bootstrap内栅格布局，表格，按钮，图片的个人总结

Posted 2020-11-22 changjunhui

栅格布局：

container，固定宽度的容器。

container-fluid，百分百宽度的容器。

使用行（row）在水平方向上创建一组列（colmun）。

每一行中最多能够包含12列，超出的列则另起一行排列

你的内容应该放置到列（colmun）中，只有列（colmun）可以作为行（row）的直接子元素。

列偏移：

使用col-*-offset-*类可以将列向右偏移。

例如，col-xs-offset-4表示在超小屏幕上时，将元素向右偏移4列。

div class="container">
        <div class="row">
            <div class="col-xs-4"><div class="box">1</div></div>
            <div class="col-xs-4 col-xs-offset-4"><div class="box">2</div></div>
        </div>
        <div class="row">
            <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div>
            <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-4"><div class="box">1</div></div>
            <div class="col-xs-6 col-sm-4"><div class="box">2</div></div>
            <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0"><div class="box">3</div></div>
        </div>
</div>

　　

嵌套列：

通过在列中嵌套行（row），可以将原有的列再分成12列，如此就实现了列的嵌套。

 

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="box">1</div>
                    </div>
                    <div class="col-xs-4">
                        <div class="box">2</div>
                    </div>
                    <div class="col-xs-4">
                        <div class="box">3</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

列排序：

使用col-*-push-* 将列向右推，col-*-pull-*将列向左拉。例如下面的代码将box1向右推了6列，将box3向左拉了6列，结果是它们调换了位置。

    <div class="container">
        <div class="row">
            <div class="col-xs-3 col-xs-push-6"><div class="box">box1</div></div>
            <div class="col-xs-3"><div class="box">box2</div></div>
            <div class="col-xs-3 col-xs-pull-6"><div class="box">box3</div></div>
            <div class="col-xs-3"><div class="box">box4</div></div>
        </div>
    </div>

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

表格：

.table 必须的基类

.table-bordered 带边框的表格

.table-striped 带条纹的表格（隔行变色）

.table-hover 鼠标悬浮时为整行添加背景色

.table-condensted 紧凑的表格（减少了单元格padding）

响应式的表格：

当屏幕宽度不足以显示所有的表格内容时，表格内容会出现折叠甚至溢出的现象。为了解决这个问题，我们可以将.table元素放到一个具有.table-responsive类的元素内容。

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

按钮：

我们可以使用以下几种标签表示按钮：

<a href="" class="btn btn-default">Link</a>
 <button class="btn btn-primary">Button</button>
 <input type="button" class="btn btn-success" value="登录">
 <input type="submit" class="btn btn-danger" value="删除">

 预定义样式：

<a href="" class="btn btn-default">default</a>
<a href="" class="btn btn-primary">primary</a>
<a href="" class="btn btn-success">success</a>
<a href="" class="btn btn-danger">danger</a>
<a href="" class="btn btn-warning">warning</a>
<a href="" class="btn btn-info">info</a>
<a href="" class="btn btn-link">link</a>

 

按钮的尺寸：

按钮的尺寸被分成，.btn-lg、.btn-sm、默认尺寸、.btn-xs

<a href="" class="btn btn-default btn-lg">btn-lg</a>
<a href="" class="btn btn-primary">默认尺寸</a>
<a href="" class="btn btn-success btn-sm">btn-sm</a>
<a href="" class="btn btn-danger btn-xs">btn-xs</a>

 

块级按钮：

块级按钮在移动设备上比较常见，它的宽度会充满整个父元素。

<a href="" class="btn btn-success btn-sm btn-block">提交</a>

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

图片：

响应式图片：

通过为img标签添加 .img-responsive 类名，就可以让图片自动根据父元素的宽度进行缩放。

 <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="./images/banner-1.jpg" alt="" class="img-responsive">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="./images/banner-2.jpg" alt="" class="img-responsive">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="./images/banner-3.jpg" alt="" class="img-responsive">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="./images/banner-4.jpg" alt="" class="img-responsive">
            </div>
        </div>
    </div>

图片形状：

.img-rounded 圆角的图片

.img-circle  圆形图片

.img-thumbnail 缩略图

<div class="row">
    <div class="col-xs-12 col-sm-4">
        <img src="./images/banner-1.jpg" alt="" class="img-responsive img-rounded">
    </div>
    <div class="col-xs-12 col-sm-4">
        <img src="./images/banner-2.jpg" alt="" class="img-responsive img-circle">
    </div>
    <div class="col-xs-12 col-sm-4 ">
        <img src="./images/banner-3.jpg" alt="" class="img-responsive img-thumbnail">
    </div>
</div>