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样式的写法
Component | Bootstrap 3 | Bootstrap 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表示页面列表的元素)。 | |
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 | ||
是否支持 | 是。 | 没有。 |