Bootstrap 创建一个网页
接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm
HTML 代码
<div class="jumbotron text-center" style="margin-bot……继续阅读 »
2年前 (2022-07-28) 285浏览 0评论
0个赞
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
边框
使用 border 类可以添加或移除边框:
实例
<span class="border"></span>
<span class="border border-0"></span>
<span ……继续阅读 »
2年前 (2022-07-24) 214浏览 0评论
0个赞
Bootstrap 警告框（Alert）插件
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
用法
您可以有以下两种方式启用警告框的可取消（dismissal）功能：
通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss=”……继续阅读 »
2年前 (2022-07-23) 221浏览 0评论
0个赞
Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。
最后，我们还需要使用 .input-group-text 类来设置文本的样式。
Bootstrap4 实例
<form>
……继续阅读 »
2年前 (2022-07-23) 353浏览 0评论
0个赞
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：
Class
描述
代码示例
.btn-group
该 class 用于形成基本的按钮组。在 .btn……继续阅读 »
2年前 (2022-07-21) 76浏览 0评论
0个赞
Bootstrap4 导航
如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加
.nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:
实例
<ul class="nav">
<li class="nav-item">
<a class="……继续阅读 »
2年前 (2022-07-21) 142浏览 0评论
0个赞
Bootstrap4 面包屑导航（Breadcrumb）
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。
Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 cont……继续阅读 »
2年前 (2022-07-21) 134浏览 0评论
0个赞
Bootstrap 标签
本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示：
实例
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Examp……继续阅读 »
2年前 (2022-07-20) 196浏览 0评论
0个赞
Bootstrap4 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
如何创建弹出框
通过向元素添加 data-toggle=”popover”
来来创建弹出框。
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容：
<a href="#" data-toggle="……继续阅读 »
2年前 (2022-07-19) 183浏览 0评论
0个赞
Bootstrap 图片
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
请看下面……继续阅读 »
2年前 (2022-07-18) 249浏览 0评论
0个赞
Bootstrap 列表组
本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
下面的实例演示了这点：
实例
<ul class="list-group">
<li……继续阅读 »
2年前 (2022-07-17) 401浏览 0评论
0个赞
Bootstrap 折叠（Collapse）插件
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.j……继续阅读 »
2年前 (2022-07-17) 334浏览 0评论
0个赞
Bootstrap 页面标题（Page Header）
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中：
实例
<div class="pa……继续阅读 »
2年前 (2022-07-02) 126浏览 0评论
0个赞
Bootstrap CSS 概览
在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。
因此，请在使用 Bootstrap 项目的开头包含下面的代码段。
<!D……继续阅读 »
2年前 (2022-07-01) 115浏览 0评论
0个赞
Bootstrap 下拉菜单（Dropdown）插件
Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bo……继续阅读 »
2年前 (2022-06-30) 290浏览 0评论
0个赞
Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
标签
描述
<table>
为表格添加基础样式。
<thead>
表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>
表格主体中的表格行的容器元素（<tr>）。
<tr>
一组出现……继续阅读 »
2年前 (2022-06-29) 171浏览 0评论
0个赞
Bootstrap 下拉菜单（Dropdowns）
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
实例
<div class="dropdown&q……继续阅读 »
2年前 (2022-06-27) 147浏览 0评论
0个赞
Bootstrap4 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
实例
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ip……继续阅读 »
2年前 (2022-06-26) 159浏览 0评论
0个赞
Bootstrap 按钮（Button）插件
按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
加载状态
如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text=”Loading…” 作为其属性即可，如下面实例所示：……继续阅读 »
2年前 (2022-06-26) 216浏览 0评论
0个赞
Bootstrap 进度条
本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。
默认的进度条
创建一个基本的进度条的步骤如下：
添加一个带有 class……继续阅读 »
2年前 (2022-06-25) 262浏览 0评论
0个赞
Bootstrap 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。
标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：
实例
<h1>我是标题1 h1</h1>
&l……继续阅读 »
2年前 (2022-06-21) 267浏览 0评论
0个赞
Bootstrap4 表格
Bootstrap4 基础表格
Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:
实例
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastna……继续阅读 »
2年前 (2022-06-20) 283浏览 0评论
0个赞
Bootstrap CSS编码规范
code {
font-family: “PT Mono”, Menlo, “Courier New”, monospace;
padding: 2px 4px;
font-size: 85%;
color: #d44950;
background-color: #f7f7f9;
border-radius: .2……继续阅读 »
2年前 (2022-06-20) 68浏览 0评论
0个赞
Bootstrap HTML编码规范
code {
font-family: “PT Mono”, Menlo, “Courier New”, monospace;
padding: 2px 4px;
font-size: 85%;
color: #d44950;
background-color: #f7f7f9;
border-radius: .……继续阅读 »
2年前 (2022-06-20) 438浏览 0评论
0个赞
Bootstrap 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单布局
Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
水平表单
垂直或基本表单
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父 <……继续阅读 »
2年前 (2022-06-20) 251浏览 0评论
0个赞
Bootstrap4 列表组
大部分基础列表组都是无序的。
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在
<li> 元素上添加 .list-group-item 类:
实例
<ul class="list-group">
<li class="list-group-item">First it……继续阅读 »
2年前 (2022-06-20) 181浏览 0评论
0个赞
Bootstrap4 分页
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类:
实例
<ul class=&……继续阅读 »
2年前 (2022-06-19) 279浏览 0评论
0个赞
Bootstrap4 安装使用
我们可以通过以下两种方式来安装 Bootstrap4：
使用 Bootstrap 4 CDN。
从官网 getbootstrap.com 下载 Bootstrap 4。
Bootstrap 4 CDN
国内推荐使用 Staticfile CDN 上的库：
Bootstrap4 CDN
<!– 新 Bootstrap4 核心 CSS 文件 –……继续阅读 »
2年前 (2022-06-19) 300浏览 0评论
0个赞
Bootstrap4 轮播
轮播是一个循环的幻灯片：
如何创建轮播
以下实例创建了一个简单的图片轮播效果 ：
实例
<div id="demo" class="carousel slide" data-ride="carousel">
<!– 指示符 –>
<ul class="car……继续阅读 »
2年前 (2022-06-19) 186浏览 0评论
0个赞
Bootstrap4 加载效果
要创建加载中效果可以使用 .spinner-border 类:
实例
<div class="spinner-border"></div>
尝试一下 »
可以使用文本颜色类设置不同的颜色：
实例
<div class="spinner-border text-muted"></div>……继续阅读 »
2年前 (2022-06-18) 274浏览 0评论
0个赞
