-
【web开发】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">- 1
js写在html文件的body体中
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>- 1
法二：去官网下载压缩包，在根目录下创建static目录，并在static目录下分别创建js\css\plugins\img目录，将压缩包里面的文件放到plugins目录下，如下图：
对应路径，引入css和js
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">- 1
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js">script>- 1
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
栅格系统
使用单一的一组 .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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
列偏移<div class="container" style="background-color: red"> <div>1div> <div class=" col-sm-offset-2 col-sm-6" style="background-color: #9d9d9d">2div>- 1
- 2
- 3
- 4
嵌套列<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
排版
标题
HTML 中的所有标题标签，h1-h6均可使用。<div class="container"> <h1>标题h1> <h2>标题h2> <h3>标题h3> <h4>标题h4> <h5>标题h5> <h6>标题h6> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在标题内还可以包含 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
页面主体
p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。<p> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. p> <p> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. p>- 1
- 2
- 3
- 4
- 5
- 6
中心内容
通过添加 .lead 类可以让段落突出显示。<p class="lead"> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. p> <p> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. p>- 1
- 2
- 3
- 4
- 5
- 6
内联文本元素
用mark来标记<p class="lead"> <mark>CSDNmark>是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. p>- 1
- 2
- 3
被删除的文本
用del来删除<p> <del> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. del> p>- 1
- 2
- 3
- 4
- 5
无用文本
对于没用的文本使用 s标签。<p> <s> CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区. s> p>- 1
- 2
- 3
- 4
- 5
插入文本
额外插入的文本使用 ins标签。<ins> CSDN是全球知名中文IT技术交流平台ins>- 1
带下划线的文本
为文本添加下划线，使用 u标签。<u> CSDN是全球知名中文IT技术交流平台u>- 1
着重
通过增加 font-weight 值强调一段文本。<strong>CSDN是全球知名中文IT技术交流平台strong>- 1
斜体
用斜体强调一段文本。<em>CSDN是全球知名中文IT技术交流平台em>- 1
对齐
多种对齐方式<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>- 1
- 2
- 3
- 4
- 5
改变大小写
通过这几个类可以改变文本的大小写。<p class="text-lowercase">小写p> <p class="text-uppercase">大写p> <p class="text-capitalize">首字母大写p>- 1
- 2
- 3
缩略语
使用abbr，实现对英文的缩写<abbr title="bootstrap">bstpabbr>- 1
首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。<abbr title="HyperText Markup Language" class="initialism">HTMLabbr>- 1
地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。<address> <strong>邮箱strong><br> <a href="mailto:#">111111@163.coma> address>- 1
- 2
- 3
- 4
引用
在你的文档中引用其他来源的内容，默认：<blockquote> <p>CSDN是全球知名中文IT技术交流平台。p> blockquote>- 1
- 2
- 3
说明命名来源：
添加 footer 用于标明引用来源。来源的名称可以包裹进 cite标签中。<blockquote> <p>CSDN是全球知名中文IT技术交流平台p> <footer>Someone famous in <cite title="baidu">baiducite>footer> blockquote>- 1
- 2
- 3
- 4
另一种展示风格:
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。<blockquote class="blockquote-reverse"> <p>CSDN是全球知名中文IT技术交流平台p> <footer>Someone famous in <cite title="baidu"> baiducite>footer> blockquote>- 1
- 2
- 3
- 4
代码
内联代码
通过 code 标签包裹内联样式的代码片段。Please believe, <code><sunshine >code> always comes after wind and rain- 1
用户输入
通过 kbd标签标记用户通过键盘输入的内容。<kbd><kbd>Ctrlkbd> +windows <kbd>+Skbd>kbd> is a screenshot function- 1
代码块
多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。<pre><p>Code content...</p>pre>- 1
变量
通过 var标签标记变量。y = mx + b<var>yvar> = <var>mvar><var>xvar> + <var>bvar>- 1
程序输出
通过 samp标签来标记程序输出的内容。<samp>This is the output of the program.samp>- 1
表格
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。<table class="table table-striped"> ... table>- 1
- 2
- 3
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。<table class="table table-bordered"> ... table>- 1
- 2
- 3
鼠标悬停
通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。<table class="table table-hover"> ... table>- 1
- 2
- 3
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。<table class="table table-condensed"> ... table>- 1
- 2
- 3
状态类
通过这些状态类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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
表单
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
注意：不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
按钮
可作为按钮使用的标签或元素
为 、 或 元素添加按钮类（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">- 1
- 2
- 3
- 4
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
尺寸
需要让按钮具有不同尺寸吗？使用 .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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
图片
图片形状
通过为 元素添加以下相应的类，可以让图片呈现不同的形状。<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">- 1
- 2
- 3
辅助类
情境文本颜色
通过颜色来展示意图，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>- 1
- 2
- 3
- 4
- 5
- 6
情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。<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>- 1
- 2
- 3
- 4
- 5
让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。<div class="center-block">...div>- 1
<style> .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as a mixin .element { .center-block(); } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
表单
将表单放置于 .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>- 1
- 2
- 3
- 4
- 5
- 6
路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。<ol class="breadcrumb"> <li><a href="#">Homea>li> <li><a href="#">Librarya>li> <li class="active">Datali> ol>- 1
- 2
- 3
- 4
- 5
分页
为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
标签
default改为 primary success info warning danger，即可改变标签的样式，同前面所提到的按钮样式一样。
<h3>Example heading <span class="label label-default">Newspan>h3>- 1
警告框
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.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>- 1
- 2
- 3
- 4
带标题的面版
通过 .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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
总结
本文仅仅简单介绍了Bootstrap中常用全局 CSS 样式与组件，如需想要更多的样式或组件请前往Bootstrap官网。
-
相关阅读:
【蓝桥杯选拔赛真题21】C++行李运费 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析
什么是多进程-多线程-多协程 ---- 文件系统
FIddler抓手机的通讯包的设置记录
【仿牛客网笔记】 Spring Boot进阶，开发社区核心功能-私信列表
前端程序员需要了解的MySQL
Pytorch Bert 中文分类 运行代码时候遇到的问题
C语言暑假学习刷题——Day5
MAUI 中使用 DI 及 MVVM
蓝牙耳机哪种款式好用？目前口碑超赞的4款蓝牙耳机
[附源码]计算机毕业设计JAVA疫情状况下生活物资集体团购系统
- 原文地址：https://blog.csdn.net/qq_46644680/article/details/132730367
