Bootstrap4 文字排版 Bootstrap4 折叠Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 <div class="container"> <h2>简单的折叠</h2> <p>点击 2020-08-16 Bootstrap4 学习笔记 文字排版 Bootstrap4 按钮 Bootstrap4 按钮Bootstrap 4 提供了不同样式的按钮。 <button type="button" class="btn">基本按钮</button> <button type="button 2020-08-16 Bootstrap4 学习笔记 按钮 Bootstrap4 按钮组 Bootstrap4 按钮组Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 <div class="btn-group"> &l 2020-08-16 Bootstrap4 学习笔记 按钮组 Bootstrap4 提示框 Bootstrap4 提示框提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框通过向元素添加 data-toggle=”tooltip” 来来创建提示框。 title 属性的内容为提示框显示的内容: &l 2020-08-16 Bootstrap4 学习笔记 提示框 Bootstrap4 文字排版 Bootstrap4 文字排版Bootstrap 4 默认设置Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。 默认的 font-family 为 “Helvetica Neue”, 2020-08-16 Bootstrap4 学习笔记 文字排版 Bootstrap4 模态框 Bootstrap4 模态框模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框以下实例创建了一个简单的模态框效果 : < 2020-08-16 Bootstrap4 学习笔记 模态框 Bootstrap4 网格系统 Bootstrap4 网格系统Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。 我们也可以根据自己的需要,定义列数: Bootstrap 4 的 2020-08-16 Bootstrap4 学习笔记 网格系统 Bootstrap4 自定义表单 Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。 自定义复选框如果要自定义一个复选框,可以设置 为父元素,类为 .custom-control 和 .custom-checkbox,复 2020-08-16 Bootstrap4 学习笔记 表单 Bootstrap4 表单 Bootstrap4 表单在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 <input>, <textarea& 2020-08-16 Bootstrap4 学习笔记 表单 Bootstrap4 表单控件 Bootstrap4 表单控件Bootstrap4 支持以下表单控件: input textarea checkbox radio select Bootstrap InputBootstrap 支持所有的 HTML5 输入类型: te 2020-08-16 Bootstrap4 学习笔记 表单控件 Bootstrap4 表格 Bootstrap4 表格Bootstrap4 基础表格<td> table data <tr> table row Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: <table 2020-08-16 Bootstrap4 学习笔记 表格 Bootstrap4 轮播 Bootstrap4 轮播轮播是一个循环的幻灯片: 如何创建轮播以下实例创建了一个简单的图片轮播效果 : <!DOCTYPE html> <html lang="zh-CN"> <head> &l 2020-08-16 Bootstrap4 学习笔记 轮播