学习 Bootstrap4

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

栏目

推荐阅读

Bootstrap4 按钮组
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。可以在 &lt;div&gt; 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 &raquo; 提示: 我们可以使用 .
Bootstrap4 颜色
Bootstrap4 颜色 Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: 实例 [mycode3
Bootstrap4 输入框组
Bootstrap4 输入框组我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。 Bootstrap4 实例
Bootstrap4 按钮
Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。实例 [mycode3 type='html'] 基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接 [/mycode3] 尝试一下 &raquo; 按钮类可用于 &lt;a&gt;, &lt;button&gt;, 或 &amp
Bootstrap4 下拉菜单
Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。实例 [mycode3 type='html'] Dropdown button Link 1 Link 2 Link 3 [/mycode3] 尝试一下 &
Bootstrap4 折叠
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。实例 [mycode3 type='html'] 折叠 Lorem ipsum dolor text.... [/mycode3] 尝试一下 &raquo; 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 &lt;div&gt;);
Bootstrap4 创建一个网页
Bootstrap4 创建一个网页接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.爱学习网.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面
Bootstrap4 导航
Bootstrap4 导航如果你想创建一个简单的水平导航栏，可以在 &lt;ul&gt; 元素上添加 .nav类，在每个 &lt;li&gt; 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link
Bootstrap4 多媒体对象
Bootstrap4 多媒体对象 Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 实例 [mycode3 type='html&#
Bootstrap4 列表组
Bootstrap4 列表组大部分基础列表组都是无序的。要创建列表组，可以在 &lt;ul&gt; 元素上添加 .list-group 类, 在 &lt;li&gt; 元素上添加 .list-group-item 类: 实例 [mycode3 type='html'] First item Second item Thir

Bootstrap4 提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

如何创建提示框

通过向元素添加 data-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容：


<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

以下实例可以在文档的任何地方使用提示框：


$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

指定提示框的位置

默认情况下提示框显示在元素上方。

可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:


<a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>

在按钮中使用:


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

提示内容添加 HTML 标签，设置 data-html="true"，内容放在 title 标签里头:


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

禁用按钮：


<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>