Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ディレクトリ 検索
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
このドキュメントでは、php中国語ネットマニュアルリリース

テキスト

Bootstrap 4是整个项目的重大改写。下面总结了最显着的变化，随后对相关组件进行了更具体的更改。

Beta 2的变化

While in beta, we aim to have no breaking changes. However, things don’t always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.

Breaking

  • Removed$badge-colorvariable and its usage on.badge. We use a color contrast function to pick acolorbased on thebackground-color, so the variable is unnecessary.

  • Renamedgrayscale()function togray()to avoid breaking conflict with the CSS nativegrayscalefilter.

  • Renamed.table-inverse,.thead-inverse, and.thead-defaultto.*-darkand.*-light, matching our color schemes used elsewhere.

  • Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the.table-responsiveyou’ve been using is more like.table-responsive-md. You may now use.table-responsiveor.table-responsive-{sm,md,lg,xl}as needed.

  • Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). See bower/bower#2298 for details.

  • Bootstrap still requires jQuery 1.9.1 or higher, but you’re advised to use version 3.x since v3.x’s supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.

  • Removed the unused.form-control-labelclass. If you did make use of this class, it was duplicate of the.col-form-labelclass that vertically centered awith it’s associated input in horizontal form layouts.

  • Changed thecolor-yiqfrom a mixin that included thecolorproperty to a function that returns a value, allowing you to use it for any CSS property. For example, instead ofcolor-yiq(#000), you’d writecolor: color-yiq(#000);.

Highlights

  • Introduced newpointer-eventsusage on modals. The outer.modal-dialogpasses through events withpointer-events: nonefor custom click handling (making it possible to just listen on the.modal-backdropfor any clicks), and then counteracts it for the actual.modal-contentwithpointer-events: auto.

Summary

Here are the big ticket items you’ll want to be aware of when moving from v3 to v4.

Browser support

  • Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

  • Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.

Global changes

  • Flexbox is enabled by default.In general this means a move away from floats and more across our components.

  • Switched from Less to Sass for our source CSS files.

  • Switched frompxtoremas our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.

  • Global font-size increased from14pxto16px.

  • Revamped grid tiers to add a fifth option (addressing smaller devices at576pxand below) and removed the-xsinfix from those classes. Example:.col-6.col-sm-4.col-md-3.

  • Replaced the separate optional theme with configurable options via SCSS variables (e.g.,$enable-gradients: true).

  • Build system overhauled to use a series of npm scripts instead of Grunt. Seepackage.jsonfor all scripts, or our project readme for local development needs.

  • Non-responsive usage of Bootstrap is no longer supported.

  • Dropped the online Customizer in favor of more extensive setup documentation and customized builds.

  • Added dozens of new utility classes for common CSS property-value pairs and margin/padding spacing shortcuts.

Grid system

  • Moved to flexbox.

    • Added support for flexbox in the grid mixins and predefined classes.

    • As part of flexbox, included support for vertical and horizontal alignment classes.

  • Updated grid class names and a new grid tier.

    • Added a newsmgrid tier below768pxfor more granular control. We now havexs,sm,md,lg, andxl. This also means every tier has been bumped up one level (so.col-md-6in v3 is now.col-lg-6in v4).

    • xsgrid classes have been modified to not require the infix to more accurately represent that they start applying styles atmin-width: 0and not a set pixel value. Instead of.col-xs-6, it’s now.col-6. All other grid tiers require the infix (e.g.,sm).

  • Updated grid sizes, mixins, and variables.

    • Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.

    • Updated grid mixins to utilize amake-col-readyprep mixin and amake-colto set theflexandmax-widthfor individual column sizing.

    • Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by12at their max width.

    • Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpointsand$container-max-widths) instead of a handful of separate variables. These replace the@screen-*variables entirely and allow you to fully customize the grid tiers.

    • Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have@include media-breakpoint-up/down/only. Now, instead of writing@media (min-width: @screen-sm-min) { ... }, you can write@include media-breakpoint-up(sm) { ... }.

Components

  • Dropped panels, thumbnails, and wellsfor a new all-encompassing component, cards.

  • Dropped the Glyphicons icon font.If you need icons, some options are:

    • the upstream version of Glyphicons

    • Octicons

    • Font Awesome

    • See the Extend page for a list of alternatives. Have additional suggestions? Please open an issue or PR.

  • Dropped the Affix jQuery plugin.

    • We recommend usingposition: stickyinstead. See the HTML5 Please entry for details and specific polyfill recommendations. One suggestion is to use an@supportsrule for implementing it (e.g.,@supports (position: sticky) { ... })/

    • If you were using Affix to apply additional, non-positionstyles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.

  • Dropped the pager componentas it was essentially slightly customized buttons.

  • Refactored nearly all componentsto use more un-nested class selectors instead of over-specific children selectors.

By component

This list highlights key changes by component between v3.x.x and v4.0.0.

Reboot

New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are thebox-sizing: border-boxchange, moving fromemtoremunits on many elements, link styles, and many form element resets.

Typography

  • Moved all.text-utilities to the_utilities.scssfile.

  • Dropped.page-headeras, aside from the border, all its styles can be applied via utilities.

  • .dl-horizontalhas been dropped. Instead, use.rowon

    and use grid column classes (or mixins) on its
    and
    children.

  • Custom

    styling has moved to classes—.blockquoteand the.blockquote-reversemodifier.

  • .list-inlinenow requires that its children list items have the new.list-inline-itemclass applied to them.

Images

  • Renamed.img-responsiveto.img-fluid.

  • Renamed.img-roundedto.rounded

  • Renamed.img-circleto.rounded-circle

Tables