学习 Bootstrap4

关注爱学习公众号
扫码手机阅读更方便

栏目

推荐阅读

Bootstrap4 小工具
Bootstrap4 小工具 Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。边框使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 &raquo; 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例
Bootstrap4 多媒体对象
Bootstrap4 多媒体对象 Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 实例 [mycode3 type='html&#
Bootstrap4 导航
Bootstrap4 导航如果你想创建一个简单的水平导航栏，可以在 &lt;ul&gt; 元素上添加 .nav类，在每个 &lt;li&gt; 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link
Bootstrap4 分页
Bootstrap4 分页网页开发过程，如果碰到内容过多，一般都会做分页处理。 Bootstrap 4 可以很简单的实现分页效果。要创建一个基本的分页可以在 &lt;ul&gt; 元素上添加 .pagination 类。然后在 &lt;li&gt; 元素上添加 .page-item 类：: 实例 [mycode3 type='html&#039
Bootstrap4 折叠
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。实例 [mycode3 type='html'] 折叠 Lorem ipsum dolor text.... [/mycode3] 尝试一下 &raquo; 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 &lt;div&gt;);
Bootstrap4 信息提示框
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例
Bootstrap4 文字排版
Bootstrap4 文字排版 Bootstrap 4 默认设置 Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 'Helvetica Neue', Helvetica, Arial, sans-serif。此外，所有的 &lt;p&gt; 元素 margin
Bootstrap 4 Flex
Bootstrap4 Flex（弹性）布局 Bootstrap4 通过 flex 类来控制页面的布局。弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(
Bootstrap4 面包屑导航
Bootstrap4 面包屑导航（Breadcrumb）面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::b
Bootstrap4 按钮组
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。可以在 &lt;div&gt; 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 &raquo; 提示: 我们可以使用 .

Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。


<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。


<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

垂直按钮组

可以使用 .btn-group-vertical 类来创建垂直的按钮组：


<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单：


<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

拆分按钮下拉菜单


<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

垂直按钮组及下拉菜单


<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>