- 去BootStrop中文官网下载文档
https://www.bootcss.com/ 进入到官网点击下载即可
2.由于BootStrop需要依赖Jquery的文件，所依我们需要下载Jquery
下载网站：http://www.jq22.com/jquery-info122
3.在Hbuilder中创建一个名为BootStrop练习的项目。将bootstrap.min.css、bootstrap.min.js、jquery-3.3.1.min.js这三个文件复制进来。
4.在页面中引入资源文件路径，此处的路径为官网的资源路径，联网之后才能用，尽量将引入地址改为自己资源的存放路径。
<html>
<head>
<meta charset="utf-8" />
<!-- 在IE运行最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--初始化移动浏览显示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BootStrap练习</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
5.一个小项目检测是否配置成功，此处的标签为BootStrop中的表格标签，表格效果成功则表示配置成功。
<h1>table表格</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="success">
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
<th>标题五</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>带边框的表格.table-bordered</td>
<td>条纹状表格 .table-striped</td>
<td>悬停变色 .table-hover</td>
<td>紧凑风格 .table-condensed</td>
<td>内容五</td>
</tr>
<tr class="warning">
<td>为表格添加边框</td>
<td>条纹状表格 像斑马一样 tr深色-白色之间交替</td>
<td>鼠标经过的变化效果</td>
<td>内容四</td>
<td>内容五</td>
</tr>
<tr class="danger">
<td>success 成功 绿色</td>
<td>info 信息 蓝色</td>
<td>warning 等待 黄色</td>
<td>danger 警告 红色</td>
<td>内容五</td>
</tr>
<tr class="active">
<td>active 表示鼠标悬停时的样式</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
<td>内容五</td>
</tr>
</tbody>
</table>
表格效果成功显示，表示BootStrop配置成功。
扫一扫
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
