学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 导航
Bootstrap4 导航如果你想创建一个简单的水平导航栏，可以在 &lt;ul&gt; 元素上添加 .nav类，在每个 &lt;li&gt; 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link
Bootstrap4 按钮组
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。可以在 &lt;div&gt; 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 &raquo; 提示: 我们可以使用 .
Bootstrap4 表单
Bootstrap4 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 &lt;input&gt;, &lt;textarea&gt;, 和 &lt;select&gt; elements 在使用 .form-control 类的情
Bootstrap4 徽章（Badges）
Bootstrap4 徽章（Badges）徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 &lt;span&gt; 元素上即可。徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 Ne
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
Bootstrap4 自定义表单
Bootstrap4 自定义表单 Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。自定义复选框如果要自定义一个复选框，可以设置 &lt;div&gt; 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 &lt;div&gt; 里头，然后复选框设置为 type='che
Bootstrap4 网格系统
Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0p
Bootstrap4 进度条
Bootstrap4 进度条进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的 &lt;div&gt;。接着，在上面的 &lt;div&gt; 内，添加一个带有 class .progress-bar 的空的 &lt;div&gt;。添加一个带有百分比表示的宽度的 style 属性，
Bootstrap4 弹出框
Bootstrap4 弹出框弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。如何创建弹出框通过向元素添加 data-toggle='popover' 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容： [mycode3 type='html'
Bootstrap4 卡片
Bootstrap4 卡片简单的卡片我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 实例 [mycode3 type='html'] 简单的卡片 [/mycode3] 尝试一下 &raquo; Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

Bootstrap4 轮播

轮播是一个循环的幻灯片：

如何创建轮播

以下实例创建了一个简单的图片轮播效果：


<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.lvstudy.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.lvstudy.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.lvstudy.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

轮播图片上添加描述

在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本：:


<div class="carousel-item">
  <img src="https://static.lvstudy.com/images/mix/img_fjords_wide.jpg">
  <div class="carousel-caption">
    <h3>第一张图片描述标题</h3>
    <p>描述文字!</p>
  </div>
</div>

以上实例中使用的类说明

类	描述
`.carousel`	创建一个轮播
`.carousel-indicators`	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
`.carousel-inner`	添加要切换的图片
`.carousel-item`	指定每个图片的内容
`.carousel-control-prev`	添加左侧的按钮，点击会返回上一张。
`.carousel-control-next`	添加右侧按钮，点击会切换到下一张。
`.carousel-control-prev-icon`	与 .carousel-control-prev 一起使用，设置左侧的按钮
`.carousel-control-next-icon`	与 .carousel-control-next 一起使用，设置右侧的按钮
`.slide`	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。