关于bootstrap3的下载

今天去官网下载bootstrap3显示被禁止了
https://www.newasp.net/soft/71568.html 这个地方可以下bootstrap3

1、登录bootstrap官网，点击下载Bootstrap   https://v3.bootcss.com/getting-started/

2、导入对应的样式文件css

3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js

对应导入代码：

<!--导入样式-->

<link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<!--导入bootstrap.js包-->

<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>

Bootstrap常用的class:

1、.container 居中的内容展示

2、.row  将容器分为12列

3、.col-xs-4  在.row中的列, 列必须在.row 中   .col-xs-4表示占据屏幕的三分之一 

在不同的屏幕宽度下使用:  col-xs-4 宽度小于768px  、col-sm-4宽度≥768px＜992px 、col-md-4 宽度≥992px＜1200px 、col-lg-4宽度≥1200px

4丶按钮

添加 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮



按钮组:

<div class="input-group">
    <span  class="input-group-addon">状态</span>
    <select class="form-control">
        <option value="">请选择</option>
        <option value="已审核">已审核</option>
        <option value="未审核">未审核</option>
    </select>
</div>

<div class="input-group">
    <span  class="input-group-addon">备注</span>
    <input class="form-control" type="text">
</div>



5丶pull-left/right  元素浮动到左边/右边 

6丶clearfix  清除浮动

7丶show/hidden 显示/隐藏

8丶divider 分隔线

9丶visible-*  通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。



10丶.table 基本样式(只有横向分隔线)

.table-striped  条纹状表格、.table-bordered 带边框的表格、.table-hover 对鼠标悬停状态作出响应、.table-condensed 紧缩表格

.table-responsive  将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

tr/th/td 可以使用.active/.success/.info/.warning/.danger来改变行或者单元格的颜色

更多查看官网 https://v3.bootcss.com/css/

 

 

Bootstrap水平居中

// 文本：

class ="text-center"

// 图片居中：

class = "center-block"

 

//其他元素：

//bootstrap3水平居中：利用bootstrap列偏移

class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"

// bootstrap4水平居中：

class = "m-auto"

 

Bootstrap垂直居中

bootstrap3 如何让div内部垂直居中：

Bootstrap的栅格系统使用的是float：left的浮动方式，vertical-align属性不起作用，故把内部div的float属性清除，添加display属性，如下：

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

 

Bootstrap3登录框自适应水平居中+垂直居中

https://blog.csdn.net/shenzhen_zsw/article/details/75331515

 

Bootstrap4 如何让div内部垂直居中：

给元素定高度

.login-center {

 height: 100vh;

}

 

应用.align-items-center可以使元素垂直居中：

<divclass="row align-items-centerjustify-content-center login-center">

…

</div>

应用. justify-content-center可以使元素水平居中：

效果：

 

 



 

 

Bootstrap3和Bootstrap4区别
首先引入Bootstrap3和4官网连接； Bootstrap3   VS   Bootstrap4.
不同点




Bootstrap3
Bootstrap4




Less
Sass语言编写


4种栅格类
5种栅格类


使用px为单位
使用rem和em为单位（除部分margin和padding使用px）


使用push和pull向左右移动
偏移列通过offset-类设置


使用float的布局方式
选择弹性盒模型（flexbox）


注：Bootstrap3的4种栅格：

特小（col-xs-） 适配手机(<768px)
小（col-sm-） 适配平板(≥768px)
中（col-md-） 适配电脑(≥992px)
大（col-lg-） 适配宽屏电脑(≥1200px)

Bootstrap4的5种栅格：

特小（col-）(<576px)
小（col-sm-）(≥576px)
中（col-md-）(≥768px)
大（col-lg-） (≥992px)
特大（col-xl-）（≥1200px）

Bootstrap4特点

新增网格层适配了移动端；
全面引入ES6新特性（重写所有JavaScript插件）；
css文件减少了至少40%；
所有文档都用Markdown编辑器重写；
放弃对IE8的支持