【web开发】3、Bootstrap基础
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 一、Bootstrap是什么？
- 二、使用步骤
-
- 1.引入Bootstrap
- 2.Bootstrap常用全局 CSS 样式介绍与示例
- 布局容器
- 栅格系统
- 排版
- 代码
- 表格
- 表单
- 按钮
- 图片
- 辅助类
- 3.Bootstrap常用组件介绍与示例
- 字体图标
- 下拉菜单
- 分割线
- 作为额外元素的多选框和单选框
- 默认样式的导航条
- 表单
- 路径导航
- 分页
- 标签
- 警告框
- 带标题的面版
- 总结
一、Bootstrap是什么？
Bootstrap提供了一组预先设计的HTML、CSS和JavaScript组件，如按钮、表单、导航栏等，以帮助开发人员快速轻松地创建响应迅速、视觉吸引力强的网站和web应用程序。 Bootstrap允许开发人员通过提供一组一致且记录良好的设计元素来节省时间，这些元素可以根据特定的项目需求进行定制。
Bootstrap官网：https://v3.bootcss.com/
二、使用步骤
1.引入Bootstrap
法一：官网提供了CDN 的支持，直接使用这些 BootCDN.cn 提供的链接即可。
css写在html文件的head体中
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
js写在html文件的body体中
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
法二：去官网下载压缩包，在根目录下创建static目录，并在static目录下分别创建js\css\plugins\img目录，将压缩包里面的文件放到plugins目录下，如下图：
对应路径，引入css和js
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js">script>
2.Bootstrap常用全局 CSS 样式介绍与示例
布局容器
在Bootstrap中，.container 是一个常用的类，用于包裹网页内容，帮助实现响应式设计。.container 类有两个变种：.container 和 .container-fluid，它们在网页布局中有不同的用途。
1.container 类：
.container 类用于固定宽度并支持响应式布局的容器。
2.container-fluid 类：
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="container">
<div style="background-color: pink">起始位置距离前面边缘有一段位置div>
div>
<div class="container-fluid">
<div style="background-color: grey">起始位置在最前方div>
div>
body>
html>
栅格系统
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid System Exampletitle>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-4" style="background-color: grey">占4列div>
<div class="col-md-8" style="background-color: #0e90d2">占8列div>
div>
div>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
body>
html>
列偏移
<div class="container" style="background-color: red">
<div>1div>
<div class=" col-sm-offset-2 col-sm-6" style="background-color: #9d9d9d">2div>
嵌套列
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
div>
div>
div>
div>
排版
标题
HTML 中的所有标题标签，h1-h6均可使用。
<div class="container">
<h1>标题h1>
<h2>标题h2>
<h3>标题h3>
<h4>标题h4>
<h5>标题h5>
<h6>标题h6>
div>
在标题内还可以包含 small 标签或赋予 .small 类的元素，可以用来标记副标题。
<div class="container">
<h1>标题 <small>副标题small>h1>
<h2>标题 <small>副标题small>h2>
<h3>标题 <small>副标题small>h3>
<h4>标题 <small>副标题small>h4>
<h5>标题 <small>副标题small>h5>
<h6>标题 <small>副标题small>h6>
div>
页面主体
p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
p>
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
p>
中心内容
通过添加 .lead 类可以让段落突出显示。
<p class="lead">
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
p>
<p>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
p>
内联文本元素
用mark来标记
<p class="lead">
<mark>CSDNmark>是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
p>
被删除的文本
用del来删除
<p>
<del>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
del>
p>
无用文本
对于没用的文本使用 s标签。
<p>
<s>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
s>
p>
插入文本
额外插入的文本使用 ins标签。
<ins> CSDN是全球知名中文IT技术交流平台ins>
带下划线的文本
为文本添加下划线，使用 u标签。
<u> CSDN是全球知名中文IT技术交流平台u>
着重
通过增加 font-weight 值强调一段文本。
<strong>CSDN是全球知名中文IT技术交流平台strong>
斜体
用斜体强调一段文本。
<em>CSDN是全球知名中文IT技术交流平台em>
对齐
多种对齐方式
<p class="text-left">左对齐p>
<p class="text-center">居中对齐p>
<p class="text-right">右对齐p>
<p class="text-justify">两端对齐p>
<p class="text-nowrap">无换行p>
改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">小写p>
<p class="text-uppercase">大写p>
<p class="text-capitalize">首字母大写p>
缩略语
使用abbr，实现对英文的缩写
<abbr title="bootstrap">bstpabbr>
首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
<abbr title="HyperText Markup Language" class="initialism">HTMLabbr>
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。
<address>
<strong>邮箱strong><br>
<a href="mailto:#">[email protected]a>
address>
引用
在你的文档中引用其他来源的内容，默认：
<blockquote>
<p>CSDN是全球知名中文IT技术交流平台。p>
blockquote>
说明命名来源：
添加 footer 用于标明引用来源。来源的名称可以包裹进 cite标签中。
<blockquote>
<p>CSDN是全球知名中文IT技术交流平台p>
<footer>Someone famous in <cite title="baidu">baiducite>footer>
blockquote>
另一种展示风格:
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
<blockquote class="blockquote-reverse">
<p>CSDN是全球知名中文IT技术交流平台p>
<footer>Someone famous in <cite title="baidu"> baiducite>footer>
blockquote>
代码
内联代码
通过 code 标签包裹内联样式的代码片段。
Please believe, <code><sunshine >code> always comes after wind and rain
用户输入
通过 kbd标签标记用户通过键盘输入的内容。
<kbd><kbd>Ctrlkbd> +windows <kbd>+Skbd>kbd> is a screenshot function
代码块
多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。
<pre><p>Code content...</p>pre>
变量
通过 var标签标记变量。y = mx + b
<var>yvar> = <var>mvar><var>xvar> + <var>bvar>
程序输出
通过 samp标签来标记程序输出的内容。
<samp>This is the output of the program.samp>
表格
<div>
<h1>数据表格h1>
<table class="table">
<thead>
<tr> <th>IDth> <th>姓名th> <th>年龄th> tr>
thead>
<tbody>
<tr> <td>10td> <td>aatd> <td>22td> tr>
<tr> <td>11td> <td>bbtd> <td>23td> tr>
<tr> <td>12td> <td>cctd> <td>12td> tr>
<tr> <td>13td> <td>ddtd> <td>23td> tr>
tbody>
table>
div>
条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
<table class="table table-striped">
...
table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
...
table>
鼠标悬停
通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
...
table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed">
...
table>
状态类
通过这些状态类class可以为行或单元格设置颜色。
.active :鼠标悬停在行或单元格上时所设置的颜色
.success :标识成功或积极的动作
.info :标识普通的提示信息或动作
.warning :标识警告或需要用户注意
.danger :标识危险或潜在的带来负面影响的动作
<tr>
<th class="active" >activeth>
<th class="success">successth>
<th class="warning">warningth>
<th class="danger">dangerth>
<th class="info">infoth>
tr>
表单
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">文本输入框label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="文本输入框">
div>
<div class="form-group">
<label for="exampleInputPassword1">密码输入框label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码输入框">
div>
<div class="form-group">
<label for="exampleInputFile">上传文件label>
<input type="file" id="exampleInputFile">
div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
label>
div>
<button type="submit" class="btn btn-default">提交button>
form>
div>
注意：不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)label>
<div class="input-group">
<div class="input-group-addon">$div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00div>
div>
div>
<button type="submit" class="btn btn-primary">Transfer cashbutton>
form>
div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with successlabel>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">span>
<span id="inputSuccess2Status" class="sr-only">(success)span>
div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warninglabel>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true">span>
<span id="inputWarning2Status" class="sr-only">(warning)span>
div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with errorlabel>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">span>
<span id="inputError2Status" class="sr-only">(error)span>
div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with successlabel>
<div class="input-group">
<span class="input-group-addon">@span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)span>
div>
按钮
可作为按钮使用的标签或元素
为 、 或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Linka>
<button class="btn btn-default" type="submit">Buttonbutton>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<button type="button" class="btn btn-default">（默认样式）Defaultbutton>
<button type="button" class="btn btn-primary">（首选项）Primarybutton>
<button type="button" class="btn btn-success">（成功）Successbutton>
<button type="button" class="btn btn-info">（一般信息）Infobutton>
<button type="button" class="btn btn-warning">（警告）Warningbutton>
<button type="button" class="btn btn-danger">（危险）Dangerbutton>
<button type="button" class="btn btn-link">（链接）Linkbutton>
尺寸
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large buttonbutton>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default buttonbutton>
<button type="button" class="btn btn-default">（默认尺寸）Default buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small buttonbutton>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small buttonbutton>
p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small buttonbutton>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small buttonbutton>
p>
图片
图片形状
通过为 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
辅助类
情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
<p class="text-muted">...p>
<p class="text-primary">...p>
<p class="text-success">...p>
<p class="text-info">...p>
<p class="text-warning">...p>
<p class="text-danger">...p>
情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
<p class="bg-primary">...p>
<p class="bg-success">...p>
<p class="bg-info">...p>
<p class="bg-warning">...p>
<p class="bg-danger">...p>
让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
<div class="center-block">...div>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
style>
3.Bootstrap常用组件介绍与示例
字体图标
在页面上鼠标右键–检查–选择图标–复制
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
<div class="dropdown">
div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
span>
<input type="text" class="form-control" aria-label="...">
div>
div>
div>
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Branda>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
<li role="separator" class="divider">li>
<li><a href="#">One more separated linka>li>
ul>
li>
ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Actiona>li>
<li><a href="#">Another actiona>li>
<li><a href="#">Something else herea>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated linka>li>
ul>
li>
ul>
div>
div>
nav>
表单
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
div>
<button type="submit" class="btn btn-default">Submitbutton>
form>
路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
<ol class="breadcrumb">
<li><a href="#">Homea>li>
<li><a href="#">Librarya>li>
<li class="active">Datali>
ol>
分页
为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
标签
default改为 primary success info warning danger，即可改变标签的样式，同前面所提到的按钮样式一样。
<h3>Example heading <span class="label label-default">Newspan>h3>
警告框
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。
<div class="alert alert-success" role="alert">...div>
<div class="alert alert-info" role="alert">...div>
<div class="alert alert-warning" role="alert">...div>
<div class="alert alert-danger" role="alert">...div>
带标题的面版
通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的
-
标签，添加一个预定义样式的标题。不过，
-
标签的字体大小将被 .panel-heading 的样式所覆盖。
<div class="panel panel-default">
<div class="panel-heading">Panel heading without titlediv>
<div class="panel-body">
Panel content
div>
div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel titleh3>
div>
<div class="panel-body">
Panel content
div>
div>
总结
本文仅仅简单介绍了Bootstrap中常用全局 CSS 样式与组件，如需想要更多的样式或组件请前往Bootstrap官网。