推荐阅读
  • Bootstrap4 图片

    图片 添加响应式设计的图片,这很简单,只需要给图片加上一些类就可以了。 响应式图片Bootstrap 中,给图片添加 .img-fluid 类,这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%; 和 height: auto; 可以让图片根据父元素的大小进行等比例缩放。

  • Bootstrap4 兼容性

    浏览器与设备 了解 Bootstrap4 在各个浏览器和设备上的表现,这包含一些已知的奇怪问题。 浏览器 Bootstrap 支持所有主流浏览器和平台的最新,稳定版本。 在 Windows 上,支持 Internet Explorer 10-11 / Microsoft Edge 。 由于浏览器日新月异,大部分最新版本浏览器的内核可能无法确定提供一致

  • Bootstrap4 重置

    重置 针对 HTML 的特定元素重置样式,以便 Bootstrap 能在各种浏览器下表现一致。 方式 Bootstrap 重置了大部分基本的HTML元素的视觉效果,不过这只能通过调用特定的 class 来实现,比如 <table> 的样式,需要使用 .table, .table-bordered 类

  • Bootstrap4 图标

    图标 在 Bootstrap 中使用外部图标库的指导和建议。 默认情况下,Bootstrap 不包含图标库,但我们提供了一些建议供你选择。 虽然大多数图标集包含多种文件格式,但我们更喜欢SVG实现,以提高其可访问性和矢量支持。推荐的选择我们自己测试并使用过这些图标集。 Font Awesom

  • Bootstrap4 图文区

    图文区 - Figures 展示图片及其说明 如果需要显示带有标题的图像,请考虑使用<figure>(一种全新的玩法)。 使用包含的 .figure , .figure-img 和 .figure-caption 类为HTML5 <figure> 和 <figcaption>

  • Bootstrap4 下载

    下载 下载 Bootstrap 以获取已编译的 CSS 和 JavaScript ,源代码,或将其包含在你最喜欢的包管理器中,如 npm , RubyGems 等。 已编译的 CSS 和 JS 下载已编译的 Bootstrap v4.3.1 , 包含: 已编译并且压缩好的 CSS 已编译并且压缩好的 JavaScri

  • Bootstrap4 可见性

    可见性 通过可见性工具控制可见性,不会影响物件的实际空间。 使用可见性通用类别设置元素的 visibility。这不会改变 display 值,并且有助于对大部分使用者隐藏内容,但是在屏幕阅读器仍然保存它们。 依需求使用 .visible 或 .invisible 。复制<div class

  • Bootstrap4 下拉菜单

    下拉菜单 使用 Bootstrap 下拉菜单插件通过链接来切换内文框显示 概述 下拉选单是可切换的,内文框用于显示链接列表或其他。这些交互功能于 Bootstrap JavaScript 下拉选单插件提供。通过点击切换,而不是滑入的方式,这是一个策划好了的 设计决定。 下拉选单是通过第三方插件, Popper.js 所建构的,这提供了动态位置及 vi

  • Bootstrap4 排版

    排版 Bootstrap 排版功能,包括全局设置,标题,正文,列表等。 全局设定 Bootstrap 设置基本的全局显示,排版和链接样式。 当需要更多控制时,请查看文本工具。 使用本机字体为每个操作系统和设备选择最佳字体系列。 更具包容性和可访问的缩放设置,我们假设浏览

  • Bootstrap4 输入框组

    输入框组 将一组表单控件加入其中,可以是文字内容,按钮,按钮组等。 基本例子 在输入框组的两侧放置附加组件或按钮。 记得要放置 <label> 在输入框组之外。 @

Bootstrap4 图文区

图文区 - Figures

展示图片及其说明

如果需要显示带有标题的图像,请考虑使用<figure>(一种全新的玩法)。

使用包含的 .figure.figure-img.figure-caption 类为HTML5 <figure><figcaption> 元素提供一些基本样式。 <figure> 中的图像没有明确的大小,因此请务必将 .img-fluid 类添加到 <img> 以使其成为响应式设计的图像。

400x300
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用文本工具可以轻松对齐 figure 中标题。

400x300
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图