报告:目前完成度【 0.5/3 】,预计上线时间:【 未知 】 【问卷调查】
英文链接源链接 [18380]
contenteditable="true"

Bootstrap 4 - Overview 介绍

什么是Bootstrap 4?

Bootstrap 4是功能强大且流行的移动前端框架,用于在Web上构建响应式网站。

历史

Bootstrap v3.3.7的最后一个稳定版本,2017年8月发布了Bootstrap 4.0.0 beta版。

Bootstrap 3 与 Bootstrap 4 区别

S.No.ComponentBootstrap 3Bootstrap 4
1CSS source filesLESSSCSS
2Grid Systemxs, sm, md, lgxs, sm, md, lg, xl
3CSS Unitpxrem
4Font Size14px16px
5Dropdown Structure <ul> 和 <li><ul> 或 <div>
6Offsetting Columnscol-md-offset-4offset-md-4
7Images.img-responsive class.img-fluid class
8Tables在<div>中增加 .table-responsive class在<table>中增加 .table-responsive class
9GlyphiconsSupportedNot Supported
10Media ObjectsUses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-bodyUses just .media class for media objects.
11Dark/inverse TablesNot supportedUses .table-dark class to make dark/inverse tables
12Checkboxes and Radio ButtonsDisplays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classesDisplays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes
13Form Control SizeIncrease or decrease size of an input control by using .input-lg and .input-sm classesIncrease or decrease size of an input control by using .form-control-lg and .form-control-sm classes
14Help TextDisplay the help text by using .help-block classDisplay the help text by using .form-text class
15StylesUses the .btn-default and .btn-info classes on buttonsUses the .btn-secondary, .btn-light and .btn-dark classes on buttons and dropped the .btn-default class.
16Outline ButtonsNot SupportedStyle the buttons with outline color by using .btn-outline-* class
17Button SizesThe .btn-xs class is availableAvailable only .btn-sm and .btn-lg classes and dropped the .btn-xs class
18Menu HeadersUse .dropdown-header class to the li tagUse .dropdown-header class to h1 - h2 tags
19DividersUse the .divider class in the li elementUse the .dropdown-divider class in the div element
20Fixed NavbarsFix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classesFix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes
21PagersAlign the pages by using .previous and .next classesNot supported
22Jumbotron Full WidthIt does not uses .jumbotron-fluid class on full-width jumbotronsIt uses .jumbotron-fluid class for full-width jumbotrons
23Carousel ItemUses .item class for carousel items.Uses .carousel-item class for carousel items.
24Wells, Panels and ThumbnailsSupportedNot supported. Use cards instead
25Inline NavsIt doesn't include .nav-inline classDisplay the navs as inline by using the .nav-inline class
点我分享笔记