学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 创建一个网页
Bootstrap4 创建一个网页接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.爱学习网.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面
Bootstrap4 图像形状
Bootstrap4 图像形状圆角图片 .rounded 类可以让图片显示圆角效果：实例 [mycode3 type='html'] [/mycode3] 尝试一下 &raquo; 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3 type='html'] [/mycode3]
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 导航栏导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 &lt;ul&gt; 元素并添加 class='navbar-nav' 类。然后在 &a
Bootstrap4 滚动监听
Bootstrap 滚动监听(Scrollspy) 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。如何创建滚动监听以下实例演示了如何创建滚动监听：实例 [mycode3 type='html'] ... Section 1 ... Sec
Bootstrap4 按钮组
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。可以在 &lt;div&gt; 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 &raquo; 提示: 我们可以使用 .
Bootstrap4 下拉菜单
Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &
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 轮播轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例 [mycode3 type='html']

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`	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。