学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 表单
Bootstrap4 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 &lt;input&gt;, &lt;textarea&gt;, 和 &lt;select&gt; elements 在使用 .form-control 类的情
Bootstrap4 表单控件
Bootstrap4 表单控件 Bootstrap4 支持以下表单控件： input textarea checkbox radio select Bootstrap Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week,
Bootstrap4 折叠
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。实例 [mycode3 type='html'] 折叠 Lorem ipsum dolor text.... [/mycode3] 尝试一下 &raquo; 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 &lt;div&gt;);
Bootstrap4 图像形状
Bootstrap4 图像形状圆角图片 .rounded 类可以让图片显示圆角效果：实例 [mycode3 type='html'] [/mycode3] 尝试一下 &raquo; 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3 type='html'] [/mycode3]
Bootstrap4 列表组
Bootstrap4 列表组大部分基础列表组都是无序的。要创建列表组，可以在 &lt;ul&gt; 元素上添加 .list-group 类, 在 &lt;li&gt; 元素上添加 .list-group-item 类: 实例 [mycode3 type='html'] First item Second item Thir
Bootstrap4 模态框
Bootstrap4 模态框模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。如何创建模态框以下实例创建了一个简单的模态框效果：实例 [mycode3 type='html'] 打开模态框
Bootstrap4 提示框
Bootstrap4 提示框提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。如何创建提示框通过向元素添加 data-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容： [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写
Bootstrap4 分页
Bootstrap4 分页网页开发过程，如果碰到内容过多，一般都会做分页处理。 Bootstrap 4 可以很简单的实现分页效果。要创建一个基本的分页可以在 &lt;ul&gt; 元素上添加 .pagination 类。然后在 &lt;li&gt; 元素上添加 .page-item 类：: 实例 [mycode3 type='html&#039
Bootstrap4 信息提示框
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例
Bootstrap4 安装使用
Bootstrap4 安装使用我们可以通过以下两种方式来安装 Bootstrap4：使用 Bootstrap 4 CDN。从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库： Bootstrap4 CDN [mycode3 type='html&#

Bootstrap4 滚动监听

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听

以下实例演示了如何创建滚动监听：


<!-- 可滚动区域 -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
 
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>
 
<!-- 第一部分内容 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
 
</body>

实例解析

向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。

然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （<div id="section1">）必须匹配导航栏上的链接选项（<a href="#section1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为 10 px。

设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

以下实例设置了垂直滚动监听：


<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 
  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1"> 
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div> 
        ...
      </div>
    </div>
  </div>
 
</body>