学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 进度条
Bootstrap4 进度条进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的 &lt;div&gt;。接着，在上面的 &lt;div&gt; 内，添加一个带有 class .progress-bar 的空的 &lt;div&gt;。添加一个带有百分比表示的宽度的 style 属性，
Bootstrap4 自定义表单
Bootstrap4 自定义表单 Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。自定义复选框如果要自定义一个复选框，可以设置 &lt;div&gt; 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 &lt;div&gt; 里头，然后复选框设置为 type='che
Bootstrap4 滚动监听
Bootstrap 滚动监听(Scrollspy) 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。如何创建滚动监听以下实例演示了如何创建滚动监听：实例 [mycode3 type='html'] ... Section 1 ... Sec
Bootstrap4 提示框
Bootstrap4 提示框提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。如何创建提示框通过向元素添加 data-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容： [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写
Bootstrap4 表单控件
Bootstrap4 表单控件 Bootstrap4 支持以下表单控件： input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week,
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 图像形状圆角图片 .rounded 类可以让图片显示圆角效果：实例 [mycode3 type='html'] [/mycode3] 尝试一下 &raquo; 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3 type='html'] [/mycode3]
Bootstrap4 网格系统
Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0p
Bootstrap4 面包屑导航
Bootstrap4 面包屑导航（Breadcrumb）面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。 Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::b
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`	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。