一、关于bootstrap
1.简介
- 由Twitter推出的用于前端开发的开源工具包。
- 是CSS,HTML 和 JS 的集合
2.优点
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
3.bootstrap环境
（1）从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
- Download Bootstrap：下载 Bootstrap。点击该按钮，可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source：下载源代码。点击该按钮，可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
（2）使用CDN环境，我的整个学习过程中是从https://www.bootcdn.cn/中搜索相关库。
注意事项：bootstrap一般嵌套在jquery中使用，所以还需要引入jquery的CDN服务。
二、部分应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.6.0/cjs/popper.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<!--网格系统-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-success">
<h3>1.1</h3>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-warning">
<h3>1.2</h3>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 bg-secondary">
<h3>2.1</h3>
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-success">
<h4>2.2-1.1</h4>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-secondary">
<h4>2.2-1.2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg-warning">
<h4>2.2-2</h4>
</div>
</div>
</div>
</div>
<!--字体颜色-->
<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="text-secondary">副标题</p>
<p class="text-dark">深灰色文字</p>
<p class="text-light">浅灰色文字</p>
<p class="text-white">白色文字</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>
<p class="bg-secondary">副标题背景色</p>
<p class="bg-dark">深灰色背景色</p>
<p class="bg-light">浅灰色背景色</p>
<p class="bg-warning text-white">白色文字</p>
<!--表格-->
<table class="table table-hover table-striped">
<thead class="table-dark text-white">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr class="table-success">
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
</table>
<!--按钮-->
<div style="margin:20px">
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary btn-sm">重要按钮</button>
<button type="button" class="btn btn-success btn-sm">成功按钮</button>
<button type="button" class="btn btn-info btn-sm">提示按钮</button>
<button type="button" class="btn btn-warning btn-sm">警告按钮</button>
<button type="button" class="btn btn-danger btn-sm">危险按钮</button>
<button type="button" class="btn btn-secondary btn-sm">次要按钮</button>
<button type="button" class="btn btn-dark btn-sm">深灰按钮</button>
<button type="button" class="btn btn-light btn-sm">浅灰按钮</button>
<button type="button" class="btn btn-link btn-sm">链接按钮</button>
</div>
<!--按钮设置边框-->
<div style="margin:20px">
<button type="button" class="btn btn-outline-primary btn-sm">重要按钮</button>
<button type="button" class="btn btn-outline-success btn-sm">成功按钮</button>
<button type="button" class="btn btn-outline-info btn-sm">提示按钮</button>
<button type="button" class="btn btn-outline-warning btn-sm">警告按钮</button>
<button type="button" class="btn btn-outline-danger btn-sm">危险按钮</button>
<button type="button" class="btn btn-outline-secondary btn-sm">次要按钮</button>
<button type="button" class="btn btn-outline-dark btn-sm">深灰按钮</button>
<button type="button" class="btn btn-outline-light btn-sm">浅灰按钮</button>
</div>
<!--表单-->
<form action="" method="post" role="form">
<table class="table table-hover">
<tbody>
<tr>
<td class="text-right" style="vertical-align: middle" >账 号：</td>
<td class="text-left">
<input type="text" name="myname" id="myname" class="form-control" value="" placeholder="字母和数字的组合" required="required" style="width: 240px">
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle" >邮 箱：</td>
<td class="text-left">
<input type="email" name="myemail" id="myemail" class="form-control" value="" required="required" style="width: 240px">
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle" >性 别：</td>
<td class="text-left">
<lable class="radio-inline"><input type="radio" checked name="sextype" value="男">男</lable>
<lable class="radio-inline"><input type="radio" name="sextype" value="女">女</lable>
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle" >爱 好：</td>
<td class="text-left form-check form-check-inline">
<lable><input type="checkbox" name="myhobby" class="form-check-input" value="">弹琴</lable>
<lable><input type="checkbox" name="myhobby" class="form-check-input" value="">下棋</lable>
<lable><input type="checkbox" name="myhobby" class="form-check-input" value="">书法</lable>
<lable><input type="checkbox" name="myhobby" class="form-check-input" value="">绘画</lable>
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle" >职 业：</td>
<td class="text-left">
<select class="form-control" id="myjob" style="width: 240px">
<option>后台开发工程师</option>
<option>前端工程师</option>
<option>测试工程师</option>
<option>运维工程师</option>
</select>
</td>
</tr>
<tr>
<td class="text-right" style="vertical-align: middle" >提交日期：</td>
<td class="text-left">
<input type="date" name="mydate" id="mydate" class="form-control" value="" required="required" style="width: 240px">
</td>
</tr>
<tr>
<td></td>
<td class="text-center">
<button type="submit" class="btn btn-primary">提交</button>
</td>
</tr>
</tbody>
</table>
</form>
<!--导航控件-->
<!--去掉flex-column，则导航由竖直变为水平-->
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">新闻</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">社会</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">科技</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">历史</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">经济</a>
</li>
</ul>
<!--下拉菜单-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation" >
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
<!--卡片-->
<div class="card" style="margin: 20px">
<div class="card-header bg-info text-white">标题</div>
<div class="card-body">
<h6>系统功能如下</h6>
<ul class="list-group">
<li class="list-group-item">用户管理</li>
<li class="list-group-item">数据统计</li>
<li class="list-group-item">角色权限</li>
<li class="list-group-item">业务报表</li>
<li class="list-group-item">操作日志</li>
</ul>
</div>
<div class="card-footer">底部信息</div>
</div>
<!--徽章
badge-pill:胶囊徽章，使圆角弧度更大
-->
<div style="margin: 20px">
<h6>各种颜色的徽章</h6>
<span class="badge badge-primary">主要</span>
<span class="badge badge-pill badge-secondary">次要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>
<h6>嵌套在按钮中的徽章</h6>
<button type="button" class="btn btn-primary">
Message <span class="badge badge-light">3</span>
</button>
</div>
<!--文字图标
font-awesome4.7图标库: http://www.fontawesome.com.cn/faicons/
-->
<div style="margin: 20px">
<button class="btn btn-sm btn-info"><i class=" fa fa-plus-square"></i> 添 加 </button>
<button class="btn btn-sm btn-warning"><i class=" fa fa-pencil-square"></i> 修 改 </button>
<button class="btn btn-sm btn-danger"><i class=" fa fa-remove"></i> 删 除 </button>
</div>
<!--分页-->
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>抛完一大段代码后，下面说说在整个学习过程中遇到的问题。
1.<meta name="viewport" content="width=device-width,initial-scale=1.0">
- 该段代码是为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放。
- 将width设置为 device-width 可以确保它能正确呈现在不同设备上。
- initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
2.引入popper与fontawesome
- popper是参考popper.js来实现浮动的工具
- fontawesome是一个图标库，在实现图标文字时使用，学习过程中使用4.7.0版本，可通过http://www.fontawesome.com.cn/faicons/查看图标
3.由于版本不同，有些功能的使用不尽相同
- 这一点体会很深，在学习下拉菜单时，发现自己输入的代码明明没有错，但是点击下拉按钮后，没有任何子菜单进行展示，于是去网上找了其他能运行的例子再次实验，发现还是不行，百思不得其解，后来尝试换了一下bootstrap的版本，当时使用的是4.5.3无法下拉，后来换成3.3.7可使用。
- 第二个点是，在更换不同版本的bootstrap时，以字体颜色与背景色来说，bootstrap3颜色偏浅，bootstrap4颜色更深。
- 还有一些其他功能有差异，比如分页等，可使用中再慢慢发现，不一一罗列
三、IDEA中的bootstrap3插件
1.步骤：file -> settings -> plugins -> 搜索“bootstrap”插件，下载bootstrap3和4都可用的
2.该插件主要作用是可以快捷补全一些常用的功能
例如，输入bs3-form，再按Tab键，会自动生成如下所示代码：
<form action="" method="post" role="form">
<legend>Form Title</legend>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="" id="" placeholder="Input...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>再比如，输入bs3-table，生成以下代码：
<table class="table table-hover">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
emmmm，我的潦草学习结束了……
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
