工作在浏览器上人-YangBobin

摘要： Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。一、边框使用 border 类可以添加或移除边框: 尝试一下 »二、边框颜色Bootstrap4 提供了一些类来设置边框颜色: 尝试一下 »三、边框圆角设置使用rounded 类可以添加圆角边框: 尝试一下 »四、浮动.float-right 类用于设置元素右浮动， .flo... 阅读全文

摘要： Bootstrap 4 通过 flex 类来控制页面的布局。一、弹性盒子(flexbox) ：.d-*-flex；.d-*-inline-flexBootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性... 阅读全文

摘要： Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:一、基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 菜鸟教程 学的不仅是技术，更是梦想！！！ ... 阅读全文

摘要： 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。一、如何创建滚动监听以下实例演示了如何创建滚动监听：向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。注意可滚动... 阅读全文

摘要： 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。一、如何创建弹出框通过向元素添加 data-toggle="popover" 来来创建弹出框。title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容：多次点我注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。以下实例可以... 阅读全文

摘要： 提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。一、如何创建提示框通过向元素添加 data-toggle="tooltip" 来来创建提示框。title 属性的内容为提示框显示的内容：鼠标移动到我这注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。以下实例可以在文档的任何地方使用提示框：$(document).ready... 阅读全文

摘要： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 一、如何创建模态框 以下实例创建了一个简单的模态框效果 ： 按钮：用于打开模态框 打开模态框 模态框 模态框头部 模态框头部 ×... 阅读全文

摘要： 轮播是一个循环的幻灯片：一、如何创建轮播以下实例创建了一个简单的图片轮播效果 ： 指示符 轮播图片 左右切换按钮 尝试一下 »二、轮播图片上添加描述 ... 阅读全文

摘要： Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。一、自定义复选框如果要自定义一个复选框，可以设置 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。复选框的文本使用 label 标签，标签使用 .custo... 阅读全文

摘要： 一、输入框前后添加信息我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。 @ ... 阅读全文

摘要： Bootstrap4 支持以下表单控件：input textarea checkbox radio select一、Bootstrap InputBootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel... 阅读全文

摘要： 创建表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 input, textarea, 和 select ，elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。Bootstrap4 表单布局堆叠表单 (全屏宽度)：垂直方向 内联表单：水平方向Boo... 阅读全文

摘要： 面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class... 阅读全文

摘要： 一、导航栏导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。 然后在 元素上添加 .nav-item 类， 元素上使用 .nav-link 类: 小屏幕上水... 阅读全文

摘要： 一、什么是 AJAX ？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新 阅读全文

摘要： 一、创建导航栏如果你想创建一个简单的水平导航栏，可以在 元素上添加 .nav类，在每个 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: Link Link Link Disabled 导航居中 导航右对齐 尝试一下 »三、垂直导航.flex-column 类用于创建... 阅读全文

摘要： Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 折叠 Lorem ipsum dolor text.... 尝试一下 » 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle="collapse" 属性。 ... 阅读全文

摘要： 一、创建下拉菜单Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。 元素上添加 .dropdown-menu 类来设置实际下拉菜单... 阅读全文