目录 搜索
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(能见度)
文字

重新启动,单个文件中特定于元素的CSS更改集合,kickstart Bootstrap提供优雅、一致且简单的基础来构建环境。

Approach

重新启动基于Normalize构建,仅使用元素选择器提供许多有些自以为是风格的HTML元素。额外的样式只能通过类来完成。例如,我们重新启动一些样式以获得更简单的基准,然后再提供.table.table-bordered等等。

以下是我们的指南和选择重新启动时要重写的内容的原因:

  • 更新一些浏览器默认值以使用rems而不是ems来表示可伸缩组件间距。

  • 避免margin-top。垂直边距可能会崩溃,产生意想不到的结果。更重要的是,单一的方向margin是一个更简单的心理模型。

  • 为了便于跨设备大小缩放,块元素应该使用rems来表示margins。

  • 尽可能保持与font相关属性的声明最小化inherit

Page defaults

元素更新,以提供更好的页面宽度默认值。进一步来说:

  • box-sizing在全球范围内设定的每一个元素,包括*::before*::after,来border-box。这确保了由于填充或边框而永远不会超出声明的元素宽度。

    • 没有font-size声明基地,但16px假定(浏览器默认)。通过媒体查询font-size: 1rem应用于易于响应的类型缩放,同时尊重用户偏好并确保更易于访问的方法。

  • 还设置一个全球性的font-familyline-heighttext-align。稍后会被某些表单元素继承以防止字体不一致。

  • 为了安全起见,它有一个声明background-color,默认为#fff

Native font stack

默认的Web字体(Helvetica Neue,Helvetica和Arial)已被放入Bootstrap 4中,并替换为“原生字体堆栈”,以在每个设备和操作系统上实现最佳文本呈现。阅读本Smashing杂志文章中有关原生字体堆栈的更多信息。

$font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

font-family适用于整个Bootstrap并在全局自动继承。要切换全局font-family,请更新$font-family-base并重新编译Bootstrap。

Headings and paragraphs

所有标题元素 - 例如

-

重置为margin-top删除。标题margin-bottom: .5rem添加了段落margin-bottom: 1rem,并且可以轻松排列。

标题

H1。Bootstrap标题

H2。Bootstrap标题

H3。Bootstrap标题

H4。Bootstrap标题

H5。Bootstrap标题

H6。Bootstrap标题

Lists

所有lists-

      -具备其margin-top删除和margin-bottom: 1rem。嵌套列表没有margin-bottom

为了更简单的样式,清晰的层次结构和更好的间距,说明列表已更新margin

重设margin-left0并添加margin-bottom: .5rem。其中
s是粗体的

Preformatted text

元素被重置为删除它margin-top并为其使用rem单位margin-bottom

Tables

表格略微调整为样式,折叠边界,并确保始终一致text-align。对.table班级附加更改,边框,填充等。

Forms

各种表单元素已被重新引导,以实现更简单的基本样式。以下是一些最显着的变化:

  • s没有边框,填充或边距,因此它们可以很容易地用作单个输入或输入组的包装。

  • 与字段集一样,它也被重新设置为显示为各种标题。

  • s被设置为display: inline-block允许margin应用。

  • s,