学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 信息提示框
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例
Bootstrap4 轮播
Bootstrap4 轮播轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例 [mycode3 type='html']
Bootstrap4 Jumbotron
Bootstrap4 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。我们可以通过在 &lt;div&gt; 元素中添加 .jumbotron 类来创建 jumbotron: 实例 [mycode3 type
Bootstrap4 徽章（Badges）
Bootstrap4 徽章（Badges）徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 &lt;span&gt; 元素上即可。徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 Ne
Bootstrap4 下拉菜单
Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &
Bootstrap4 网格系统
Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0p
Bootstrap4 教程
Bootstrap4 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出
Bootstrap4 小工具
Bootstrap4 小工具 Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。边框使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 &raquo; 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例
Bootstrap4 创建一个网页
Bootstrap4 创建一个网页接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.爱学习网.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面
Bootstrap4 按钮
Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。实例 [mycode3 type='html'] 基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接 [/mycode3] 尝试一下 &raquo; 按钮类可用于 &lt;a&gt;, &lt;button&gt;, 或 &amp

Bootstrap4 折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。


<button data-toggle="collapse" data-target="#demo">折叠</button>
 
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

实例解析

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。

注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:


<a href="#demo" data-toggle="collapse">Collapsible</a>
 
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示:


<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

以下实例通过扩展卡片组件来显示简单的手风琴。

注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。


<div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      选项一
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      #1 内容：爱学习网教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    选项二
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #2 内容：爱学习网教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      选项三
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #3 内容：爱学习网教程 -- 学的不仅是技术，更是梦想！！！
    </div>
  </div>
</div>
</div>