Bootstrap 标签页（Tab）插件
标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bo……继续阅读 »
2年前 (2022-06-18) 263浏览 0评论
0个赞
Bootstrap 面包屑导航（Breadcrumbs）
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 ……继续阅读 »
2年前 (2022-06-18) 235浏览 0评论
0个赞
Bootstrap 插件概览
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下……继续阅读 »
2年前 (2022-06-18) 307浏览 0评论
0个赞
Bootstrap4 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron:
实例
<div class="jumbotron"……继续阅读 »
2年前 (2022-06-16) 157浏览 0评论
0个赞
Bootstrap4 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏
(大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class=”navbar-nav” 类。
然后在 <li> 元素上添加 .nav……继续阅读 »
2年前 (2022-06-16) 206浏览 0评论
0个赞
Bootstrap4 创建一个网页
接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm
HTML 代码
<div class="jumbotron text-center" style="margin-bo……继续阅读 »
2年前 (2022-06-15) 136浏览 0评论
0个赞
Bootstrap4 卡片
简单的卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:
实例
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
尝试一下 »
Bootstra……继续阅读 »
2年前 (2022-06-15) 186浏览 0评论
0个赞
Bootstrap 缩略图
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
……继续阅读 »
2年前 (2022-06-14) 283浏览 0评论
0个赞
Bootstrap 环境安装
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
您会看到两个按钮：
Download Bootstrap：下载 ……继续阅读 »
2年前 (2022-06-14) 270浏览 0评论
0个赞
Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 boot……继续阅读 »
2年前 (2022-06-13) 256浏览 0评论
0个赞
Bootstrap 导航元素
本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。
表格导航或标签
创建一个标签式的导航菜单：
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
下面的实例演示了这点：
实例……继续阅读 »
2年前 (2022-06-13) 153浏览 0评论
0个赞
Bootstrap 面板（Panels）
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：
实例
<div class="panel panel-default">
&……继续阅读 »
2年前 (2022-06-13) 248浏览 0评论
0个赞
Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.g……继续阅读 »
2年前 (2022-06-12) 263浏览 0评论
0个赞
Bootstrap 滚动监听（Scrollspy）插件
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的……继续阅读 »
2年前 (2022-06-11) 255浏览 0评论
0个赞
Bootstrap4 表单控件
Bootstrap4 支持以下表单控件：
input
textarea
checkbox
radio
select
Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型:
text, password, datetime, datetime-local, date, month, time, week, number,
email, url, sea……继续阅读 »
2年前 (2022-06-10) 221浏览 0评论
0个赞
Bootstrap 徽章（Badges）
本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class=”badge”> 添加到链接、Bootstrap 导航等这些元素上即可。
下面的实例演示了这点：
实例
展示未读邮件：
<a hr……继续阅读 »
2年前 (2022-06-10) 234浏览 0评论
0个赞
Bootstrap4 进度条
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表……继续阅读 »
2年前 (2022-06-10) 243浏览 0评论
0个赞
Bootstrap4 提示框
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
如何创建提示框
通过向元素添加 data-toggle=”tooltip”
来来创建提示框。
title 属性的内容为提示框显示的内容：
<a href="#" data-toggle="tooltip" title="我是提示内容!……继续阅读 »
2年前 (2022-06-09) 245浏览 0评论
0个赞
Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well：
实例
<div class="well">您好，我在 Well 中！</div>
结果如下所示：
尺寸大小
您可以使……继续阅读 »
2年前 (2022-06-09) 248浏览 0评论
0个赞
Bootstrap4 Flex（弹性）布局
Bootstrap4 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) ……继续阅读 »
2年前 (2022-06-09) 214浏览 0评论
0个赞
Bootstrap4 图像形状
圆角图片
.rounded 类可以让图片显示圆角效果：
实例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
尝试一下 »
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
实例
<img s……继续阅读 »
2年前 (2022-06-09) 182浏览 0评论
0个赞
Bootstrap4 徽章（Badges）
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span>
元素上即可。 徽章可以根据父元素的大小的变化而变化:
实例
<h1>测试标题 <span class="badge badge-secondary&qu……继续阅读 »
2年前 (2022-06-08) 108浏览 0评论
0个赞
Bootstrap 附加导航（Affix）插件
附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 boo……继续阅读 »
2年前 (2022-06-08) 137浏览 0评论
0个赞
Bootstrap4 滚动监听(Scrollspy)
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
如何创建滚动监听
以下实例演示了如何创建滚动监听：
实例
<!– 可滚动区域 –>
<body data-spy="scroll" data-target=".na……继续阅读 »
2年前 (2022-06-07) 235浏览 0评论
0个赞
Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的
font-size 为 16px,
line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素
margin-top: 0 、 margin-b……继续阅读 »
2年前 (2022-06-05) 105浏览 0评论
0个赞
Bootstrap 网格系统
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.grid tr {
text-align:center;
}
table.grid td {
border:4px solid white;
padding:6px……继续阅读 »
3年前 (2022-06-04) 335浏览 0评论
0个赞
Bootstrap4 教程
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
谁适合阅读本教程？
只要您具备……继续阅读 »
3年前 (2022-06-04) 171浏览 0评论
0个赞
Bootstrap 超大屏幕（Jumbotron）
本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
创建一个带有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>，字体粗细 font-weight ……继续阅读 »
3年前 (2022-06-03) 69浏览 0评论
0个赞
Bootstrap4 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 <input>, <textarea>, 和
<select> elements
在使用 .form-control 类的情况下，宽度都是设置为 100%。
Bootstrap4 表单布局
堆叠表……继续阅读 »
3年前 (2022-06-02) 235浏览 0评论
0个赞
Bootstrap 简介
什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么使用 Bootst……继续阅读 »
3年前 (2022-06-02) 150浏览 0评论
0个赞
