|
转自https://onlyhy.github.io/bootstrap/2018/05/16/Bootstrap4.html
浏览器与设备调优
不支持IE9
移动设备的模态框和下拉组件
iOS和安卓中，对于<body>元素中使用overflow: hidden;的支持很有限。因此在这两种设备中，当你滚动超过一个模态窗口的顶部或底部，<body>内容也会开始滚动
iOS文本字段和滚动
从IOS9.2开始，当一个模态启用，如果手势触模在一个<input>文本或<textarea>文本框内，则<body>中的内容将被滚动，而不是模态本身滚动
布局
栅格
不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。 flexbox布局不需要指定列的宽度就能实现网页自动等宽排列。
指定一列进行宽度定义，其他列将自动调整大小。 使用.col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。 等宽多行：创建跨多个行的等宽列，方法是插入 .w-100 的div flexbox可轻松实现div空间布局的垂直(align)与水平(justify)对齐
使用 .order-*选择符，可对div进行排序 使用 .offset-*， .offset-md-*栅格偏移 使用 .ml-auto 与 .mr-auto 来强制隔离两边的距离 使用 .no-gutters 类来消除间隙沟槽 使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。
媒体对象
内容
Reboot
删除了默认的Web字体（Helvetica Neue，Helvetica和Arial），并替换为“本地OS字体引用机制” 所有标题和段落元素（列如<h1>以及<p>）都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距 移除所有的列表元素（<ul>、<ol>、 <dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表无margin-bottom值
排版
.display-* 显式大标题
.lead 定义一个中心段落，用于提示这是中心内容或重要内容
引用文档中另一个来源的内容块，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用， 推荐使用p作为子级包裹容器。`<footer class="blockquote-footer">用于标识来源，.text-center、.text-right等做对齐处理 .list-inline 、 .list-inline-item 实现列表逐行显示（默认）、单行多列并排（从左到右）
代码
图片
表格
<table>添加 .table 是基本样式
.table-dark颜色反转对比效果，深色背景和浅色文本
.thead-light 或.thead-dark ，使 <thead>区显示出浅黑或深灰
.table-striped 定义 <tbody>，条纹状表格（还可结合.table-dark等）
.table-bordered 类可以产生表格边框与间隙
.table-hover 定义到 <tbody>上，可以产生行悬停效果
.table-sm 可以将表格的padding值缩减一半，使表格更加紧凑
.table-*样式对表格逐行或单个单元格着色，深色表格可用.bg-*
<caption>标签如同一个表格的标题，默认是隐藏，帮助用户了解表格内容
.table-responsive 选择器使表格支持水平响应
.table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计
图文框
组件
- 警告提示框
- 徽章
- 面包屑
- 按钮
- 按钮组
- 卡片
- 轮播效果
- 折叠面板
- 下拉菜单
- 表单
- 输入框
- 大块屏
- 列表组
- 模态框
- 导航
- 导航栏
- 分页
- POP提示
- 进度条
- 滚动监听
- 提示冒泡
警告提示框Alerts
系统提供8个可用的正确的样式（如，.alert-success） .alert-link 可为带颜色的警告文本框中的链接加上合适的颜色
警报还可以包含其他HTML元素，如标、段落和分隔符 关闭警告： * 确保正确加载了.alert警报组件或 编译后的 Bootstrap JavaScript代码组 * 自行编译JS组件要引入util.js * <button>元素添加.close关闭按钮效果，在容器中引用 .alert-dismissible* 增加data-dismiss="alert" 触发 JavaScript 动作，要使用<button>元素 * 添加.fade和.show样式（关闭警报时生成警报提示）
徽章Badge
面包屑breadcrumb
.breadcrumb,.breadcrumb-item
建议添加一个有意义的标签即aria-label="breadcrumb"來描述<nav>元素，以及使用 aria-current="page“到这组导航的最后一个项目，以标明当前页面名称（路径）
.btn-primary多个预定义按钮样式
.btn-outline-*设置边框颜色，没有大背景颜色
.btn-lg 、 .btn-sm 设置大小， .btn-block块级按钮
.active， aria-pressed="true" 属性使按钮固定为启用状态
disabled 属性使按钮处于非活动的禁用状态， <a>标签不支持 disabled 属性，需要增加 .disabled类
卡片card
卡片代替了版本3中旧的 panel、 well和 thumbnail样式 .card-body 是卡片的内容主体， .card-title和 <h*>组合，可以添加卡片标题， .card-subtitle和 <h*>结合，可以添加副标题， .card-link 与 <a>结合，添加平行的链接， .card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中
.card-header,.card-footer页眉页脚
使用文本对齐类来更改或特定部份的文本对齐 .card-img-overlay将图像转为卡片背景
.bg-primary等样式设置背景色
.border-primary 等样式设置边框色
.bg-transparent删除其background-color背景颜色
.card-group 多个卡片结为群组
当使用带页脚的卡片图时，他们的内容会自动水平对齐和栅格式布局。 使用卡片阵列Card decks（.card-deck）：一套相互不相连，但宽度和高度相同的卡片，页脚也会自动排列 .card-columns ：多列卡片浮动排版，不再基于 flexbox 而是使用 column 属性
轮播效果Carousel
.carousel引入轮播组件，并设置唯一ID
data-ride="carousel" 从页面加载开始动画
在.carousel-inner中放入.carousel-item .carousel-control-prev,.carousel-control-next 左右控制器
.carousel-indicators 状态指示器
.carousel-caption 添加字幕， .d-none 使得在小屏幕隐藏文字,.d-md-block在中型屏幕则显示
折叠面板Collapse
使用带href 属性的链接,、或者带 data-target 属性的按钮来创建折叠效果，data-toggle="collapse" 属性是必须的 可控制显示和隐藏多个元素 结合card扩展折叠组件为手风琴效果 自定义手风琴样式，只需添加 data-children 属性,指定一组元素来切换 如果折叠块元素默认是闭合的，它必须拥有一个 aria-expanded="false"值。如果用.show类设置则可以定义折叠控件为默认打开，在控制器上设置aria-expanded="true"即可
下拉菜单Dropdowns
使用时确保 popper.min.js 文件放在 Bootstrap JS之前 将下拉列表的切换（按钮或链接）和下拉菜单都包含在.dropdown中，按钮或链接使用data-toggle="dropdown" .dropdown-divider 在子菜单中添加分隔线
.dropdown-toggle-split 分列式按钮下拉菜单
.dropup 向上展开， .dropright 向右展开 .dropleft 向左展开
Bootstrap v3中子菜单项必须是链接，而 Bootstrap v4中可选择 <button> ，而不是仅仅 <a>标签 默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right到.dropdown-menu右侧轻松对齐下拉菜单。 .dropdown-header 在子菜单中添加标题
可将表单放在下拉菜单中 .active添加到子菜单中的项目以将其设置为活动状态， .disabled 是禁用状态
文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化 input文件选择控件，Bootstrap v4采用.form-control-file 取代了.form-control 使用 .form-control-lg 和 .form-control-sm 属性定控件大小高度 在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值 显示为纯文本（没有控件框），引用 .form-control-plaintext .form-check 格式化复选框和单选框按钮，默认垂直堆叠
.form-check-inline 使加到任何.form-check中的选取框平行排列
.form-group 群组可以向为表单赋予一些结构样式，也可在其它元素中使用
可使用栅格系统， 可用 .form-row来取代.row，有更小的沟槽缝隙 添加.col-form-label 到<label>上，以便他们垂直居中与他们相关的表单控件 .col-form-label-sm 、 .col-form-label-lg 控制label大小， .form-control-lg 、 .form-control-sm 控制控件大小
.form-text 表单下方帮助提示文本
novalidate添加到<form>，这将禁用浏览器默认的反馈工具提示
.input-group-prepend,.input-group-append可在组件前后放组件或按钮（不仅仅是文本）， 不支持单个输入组合中有多个表单控制项， <label>必须在输入框组之外
如.input-group-lg、.input-group-sm 加到 .input-group中，其内容会自动调整大小， 不需要在每个元素上重复使用样式控制其大小。 尽管可视化支持多个 <input>但验证样式仅适用于具有单个<input>的输入组 支持多种控件结合，比如 复选框和、文本、input框混合使用
大块屏Jumbotron
-
.jumbotron,.jumbotron -fluid扩展视口，展示关键信息
列表组list-group
.list-group,.list-group-item
.active 有效选择状态 .disabled 禁用状态（有些还需配合JS）
使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组使用.list-group-item-action，不要用.btn样式! .list-group-flush， 移除部分边框以及圆角， 产生边缘贴齐的列表组，在如Card卡片等容器中很实用
.list-group-item-primary等样式设置背景色
可引入badge徽章 列表组中几乎可以添加任意的HTML内容，包括标签、内容、链接 使用数据属性，可以指定 data-toggle="list" 或在元素上编写任意的JavaScript事件来激活列表组导航
模态框Modal
控制元素上data-toggle="modal" ，data-target="#foo" 或 href="#foo"指定动态视窗 将.modal-dialog-centered 添加到 .modal-dialog 对话框以垂直居中模式 在.modal-body中可加入 .container-fluid 栅格系统 触发的模态框相同，但内容不同， 使用event.relatedTarget 和 HTML data-* 属性， 依据所点按钮的定义来动态加载弹出窗口中的内容 $(‘#myModal‘).data(‘bs.modal‘).handleUpdate()或 $(‘#myModal‘).modal(‘handleUpdate‘) 可调整模态框的位置，以防滚动条出现
导航nav
.nav 默认情况下，导航按左对齐，可 .justify-content-center居中， .justify-content-end右对齐
.flex-column 垂直排列导航
.nav-tabs 选项卡标签
.nav-pills 胶囊标签
.nav-fill会将 .nav-item按照比例分配空间
当使用<nav>基于导航时，请确保包含 .nav-item 在a链接上 .nav-justified 等宽
role="tablist"、role="tab"、 role="tabpanel"、 aria-*动态选项卡
导航栏navbar
-
Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的， 如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边
网页可能有不止一个这样的导航部分（存在多个导航组件），建议为<nav>提供一个aria-label的描述，以反映其功能 使用 aria 属性和 .sr-only 使用图标 .disabled 禁用，再加上 tabindex="-1" 并自定义JS更保险
.pagination-lg 或 .pagination-sm 样式定义可以获得大规格或小规格尺寸的分页组件
.justify-content-center，.justify-content-end可更改对齐方式
POP提示popover
data-toggle="popover"
data-placement控制四个方向
进度条progress
.progress-bar 中放置文字內容,可将标签添加到进度条中
改变 .progress的height值， .progress-bar 高度会自动调整大小 .bg-success 等可定义外观
可在进度组件中包含（嵌套）多个进度条 .progress-bar-striped 添加到 .progress-bar 上，条纹效果
.progress-bar-animated 加到 .progress-bar 上，即实现CSS3绘制的从右到左的动画效果
添加 data-spy="scroll"到要窥探的元素（通常是<body>）。然后添加data-target属性到任何Bootstrap .nav组件的父元素ID或类的Class属性 Scrollspy滚动监控也适用于嵌套的 .nav。如果是一个嵌套 .nav是的.active状态，其父母也将是.active状态 Scrollspy 滚动监听也适用于 .list-group列表组
data-toggle="tooltip",data-placement=""设置4个方向
如果使用数据属性，将选项名称附加到data-,如 data-animation=""
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
