目录

Bootstrap4入门教程

bootstrap3和bootstrap4区别

bootstrap3和bootstrap4最大的区别就是4用的是flex布局,3用的是float浮动,bootstrap4的栅格类特小(col-),bootstrap3的栅格类特小(col-xs),bootstrap4新增加的栅格特大(col-xl-),bootstrap4用offset来移动,bootstrap3用push和pull向左和向右移动

bootstrap4不在支持IE9以及以下的浏览器。它的源码是采用 Sass 语言编写的,也就是说sass全面取代了less,这也是我第一节说看好sass的原因。代码使用flexbox的布局方式。源代码中全部使用了rem为单位(除了部分的margin和padding使用px),并结合百分比的写入方式。使得对于移动端,支持更加充分。栅格系统 ( Grid System ) 升级,更好地适配移动端。card组件,reboot模块,增强了定制化。新增媒体查询最小零界点 576px,更改了很多class样式的写法

ComponentBootstrap 3Bootstrap 4
CSS文件

LESS

SCSS

主要CSS单位

px

rem

媒体查询单位

px

px

全局字体大小

14px

16px

默认字体

Helvetica Neue,Helvetica,Arial,sans-serif

使用“本机字体堆栈”(用户的系统字体),回退到Helvetica Neue,Arial和sans-serif

网格
网格层

4层网格系统(xs,sm,md,lg)

5层网格系统(xs,sm,md,lg,xl)。

偏移列

使用col-*-offset-*类来偏移列。例如,col-md-offset-4。

使用offset-*-*类来偏移列。例如,offset-md-4。

Dark/inverse Tables

不支持。

在.table-dark课程中添加了暗/逆表。

注意:在Beta 2发布之前,这些都需要.table-inverse该类。此类已.table-dark在Beta 2中替换。

Table Head Styles

不支持。

使用.thead-light和.thead-dark类添加了表头样式。

注意:在Beta 2发布之前,这些都需要.table-default类和.table-dark类。这些类已被替换.table-light,并.table-dark在Beta 2中。

Condensed Tables

.table-condensed

.table-sm

上下文类

Bootstrap 3不.table-为其上下文类使用前缀。

例如,Bootstrap 3使用.active而Bootstrap 4使用.table-active。除此之外,两个版本都使用相同的5个上下文关键字(活动,成功,信息,警告,危险)。

.table-为其上下文类添加了前缀。

响应表

.table-responsive必须将该类添加到父div元素。

.table-responsive必须将该类添加到父div元素。

可以添加.table-responsive到实际table元素中。

Beta 2还引入了.table-responsive-*可用于指定特定断点的类。这是.table-responsive-sm,.table-responsive-md,.table-responsive-lg,和.table-responsive-xl。

Reflow Tables

不支持。

在.table-reflow类中添加了回流表。

现在已经删除了Reflow Tables。

形式
横向表格

水平表格需要.form-horizontal课程。

.row使用网格时不需要表单(尽管此类仍然是Bootstrap 3网格的一般要求)。

Bootstrap 4放弃了.form-horizontal类 - 不再需要显示水平表单。

表单.row在使用网格时需要使用类,或者.form-row在引导程序4中引入类(这使得表单更紧凑)。

使用.control-label使用网格的形式布局时。

.col-form-label当使用网格进行表单布局时,Bootstrap 4使用*。

*请注意,Bootstrap 4最初使用.form-control-label但是经常将其更改为.col-form-label。

复选框和单选按钮

使用.radio,.radio-inline,.checkbox,或.checkbox-inline以显示复选框和单选按钮。

使用.form-check,.form-check-label,.form-check-input,和.form-check-inline。

表格控制尺寸

使用.input-lg和.input-sm增大或减小输入控件的大小。

使用.form-control-lg和.form-control-sm增大或减小输入控件的大小。

表格标签尺寸

没有用于调整表单标签大小的特定类。

Bootstrap 4引入.col-form-label-sm并.col-form-label-lg增加或减少标签的大小以匹配相关表单控件的大小。

帮助文字

使用.help-block该类显示帮助文本。

Bootstrap 4使用.form-text该类来显示帮助文本。

验证和反馈图标

包括表单控件上的错误,警告和成功状态的验证样式(例如,.has-warning)。要使用Bootstrap 3在输入字段上显示图标,请使用glyphicons。

验证样式不适用于Bootstrap 4表单。请改用自定义Bootstrap表单验证消息。

Legends

没有用于样式化形式图例的类。

提供使用的选项.col-form-label上legend元素的风格看起来更像一个标签。

Static text

用于.form-control-static渲染静态文本而不是控件。

在Bootstrap 4中,.form-control-static已重命名为.form-control-plaintext。

自定义表格

不支持。

Bootstrap 4引入了自定义表单 - 完全自定义表单元素,取代了浏览器默认值。

样式

包括.btn-default和.btn-info类。

该.btn-secondary班是无法在引导3。

介绍了.btn-secondary,.btn-light和.btn-dark类。

放弃了.btn-default课程。

请注意,.btn-info该类最初在Bootstrap 4中被删除,但随后又重新出现。

Outline Buttons

不支持。

介绍了.btn-outline-*带有轮廓颜色的样式按钮的类。

介绍了.btn-*-outline带有轮廓颜色的样式按钮的类。

(这些.btn-*-outline课程成为.btn-outline-*了Alpha 3)。

Buttons 大小

该.btn-xs课程可用。

放弃了.btn-xs类(仅限.btn-sm与.btn-lg现已上市)。

input-group

Bootstrap 3使用.input-group-addon和.input-group-btn类。

引导4下降.input-group-addon,并.input-group-btn为两个新类:.input-group-prepend和.input-group-append。

Bootstrap 4还.input-group-text为输入组中的文本引入。

图片
响应式图像

使用.img-responsive课程。

使用.img-fluid课程。

图像对齐

使用.pull-right,.pull-left和.center-block辅助类。

使用.m-x-auto而不是.center-block对齐块级图像。

还可以使用各种.pull-*-right和.pull-*-left响应的辅助类,还有.text-*-left,.text-*-center和 .text-*-right对图像的父辅助类。

可以使用各种.pull-*-none类来禁用浮动。

媒体对象

包括媒体对象很多不同的类,其中包括.media,.media-body .media-object,.media-heading,.media-right,.media-left,和.media-list和.media-body。

仅使用.media课程。可以使用spacer实用程序来应用边距。Media对象在Bootstrap 4中启用了flexbox,因此也可以应用各种flexbox类(例如重新排序等)。

下拉菜单
结构体

将下拉列表应用于列表(即使用ul和li)。

下拉列表可以使用ul或divs 构建。

应用.dropdown-itema a或button元素并将它们全部包含在应用了类的div(或ul)中.dropdown-menu。

菜单标题

适用.dropdown-header于li标签。

适用.dropdown-header于h1- h2标签(如引导不再使用li标签来建立下拉菜单)。

divider

将.divider类应用于li元素(因为它使用列表来构建下拉列表)。

应用.dropdown-divider到div元素。

禁用菜单项

将.disabled类应用于li元素。

将.disabled类应用于a元素。

btn-group
是否合理?

支持合理的按钮组(通过.btn-group-justified类)。

不支持。

超小?

支持额外的小按钮组(通过.btn-group-xs课程)。

不支持(放弃.btn-group-xs课程)。

nav-inline
内联导航

没有.nav-inline课。

可以使用.nav-inline该类明确指定要内联显示的导航。

导航栏
颜色

有限(预设)颜色选项。支持反向导航栏,但不支持其他类。

新的(预设)颜色选项。引入了类.navbar-light和.navbar-dark类,并允许.bg-*类在导航栏上使用。

导航栏对齐

使用.navbar-right,.navbar-left对齐导航栏中的组件。

使用各种.pull-*-right和.pull-*-left响应的辅助类。

也可以使用各种.pull-*-none类来禁用浮动。

可以使用间距实用程序,例如.mr-auto,或任何flexbox对齐实用程序。

Navbar表单

将.navbar-form类添加到导航栏中的表单。

Bootstrap 4放弃了这个.navbar-form课程。它不再是必要的。

固定导航栏

使用.navbar-fixed-top并将.navbar-fixed-bottom导航栏固定到顶部或底部。

用途.fixed-top和.fixed-bottom。

分页
默认分页

只需要.pagination添加(ul表示页面列表的元素)。

还必须添加.page-item到每个li元素和.page-link每个 a元素。

Pagers

使用.previous和.next对齐寻呼机。

寻呼机已被丢弃在Bootstrap 4(Alpha 3)中。

使用.pager-prev和.pager-next对齐寻呼机。

标签
Pill Labels

该.label-pill课程不可用。但是,Bootstrap 3确实有徽章(它实现了类似的视觉效果)。

标签已被替换徽章在引导4。

徽章可以.badge-pill用于圆角。

标签
是否支持

没有。

“标签”在Bootstrap 3中称为“标签”(即他们使用.label该类)。

是。

的.tag类是在自举4(阿尔法3)推出,取代.label类。

这样做是为了消除label元素的歧义。

标签现在已重命名为“徽章”。这些替换Bootstrap 3中的标签。

超大屏幕
全屏宽度

该.jumbotron-fluid班是不是需要在全角jumbotrons。

介绍了.jumbotron-fluid全宽jumbotrons的课程。

进度条
使用progress?

不使用progressfor进度条。而是将进度条类应用于嵌套div元素。

使用progress进度条时使用HTML5 元素。

progress在Alpha 6中放弃使用该元素.Bootstrap 4现在div再次使用该元素。

Glyphicons
是否支持

支持的。

不支持。

Blockquotes
引用文字

blockquote默认情况下,引导样式应用于元素。

引入了.blockquote用于样式化blockquote元素的类(即样式化元素现在可以选择加入)。

Blockquote对齐

使用.blockquote-reverse对齐块引用的权利。

使用文本实用程序来对齐blockquotes(.text-center和.text-right)。

页眉

该.page-header课程受到支持。

该.page-header课程不受支持。

说明列表

该.dl-horizontal班是用来宣告水平列表。

现在.row,使用dl标记上的类声明水平列表,然后将任何网格系统的预定义类声明为dt和dd标记。

无响应的用法
是否支持

支持的。您可以指定布局无响应。

不支持。

列表组
链接列表项/按钮列表项

适用.list-group-item于a元素。

适用.list-group-item-action于a元素。

Show content
展示内容

用于.in在页面加载时扩展内容。

用于.show在页面加载时扩展内容。

Cards
是否支持

不支持。

在Bootstrap 4中引入。卡替换以前由面板,wells和缩略图提供的功能。

面板
是否支持

支持的。

不支持。请改用卡片。

Wells
是否支持

支持的。

不支持。请改用卡片。

缩略图
是否支持

支持的。

不支持。请改用卡片。

面包屑

将该.breadcrumb类用于ul标记。

还需要.breadcrumb-item对li构成面包屑的所有元素应用。

面包屑也可以在列表之外使用。例如,.breadcrumb-item可以应用于包含在a元素中的一堆.breadcrumb元素。

Carousel
Carousel Item

使用.item课程。

使用.carousel-item课程。

Affix
是否支持

是。

没有。

原文链接:https://rumenz.com/bootstrap4/
↑回到顶部↑
入门小站 @2018