初识Bootstrap-table表格简操作-2018.07.0
2018-07-04 本文已影响0人
侯小强2018
重点：对于Bootstrap的理解，表格的掌握
难点：Bootstrap命令的实际操作
Bootstrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
使用Bootstrap应用到html的步骤
（此步骤目前仅限于新手中的新手使用css！！java还没有学习）
1. 下载Bootstrap源代码 网址
解压源代码文件夹
源代码文件
2. 将源代码复制到想要运行的文件夹中，格式为.css
或者打开将里面的源代码复制到自己指定的文件夹都可以！
将代码复制到了html练习的项目下
3.开始写html，并且应用到<head>里面
命令输入：
<head>
<meta charset="UTF-8">
<title>这里输入title</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
用link链接的方式将css应用到html只是一种，老师说熟练掌握一种就可以了，实际上将css应用到html上有四种方法（有难有易），整理在css文件夹笔记中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是title</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
在table中加入表格属性，class=" 属性样式"，这里的属性样式在Bootstrap中不同样式进行添加。
<body>
<table class="table">
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
</tr>
<tr>
<td> 001</td>
<td> 智智</td>
<td> 111111</td>
</tr>
<tr>
<td> 002</td>
<td> 佩佩</td>
<td> 222222</td>
</tr>
<tr>
<td> 003</td>
<td> 娟娟</td>
<td> 333333</td>
</tr>
</table>
</body>
</html>
table功能实现的效果
其他几个table功能属性：
-
1.table-striped
在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
命令输入：
<table class="table table-striped ">
显示：
斑马条的表格
-
2.table-bordered
为所有表格的单元格添加边框
命令输入：
<table class="table table-bordered ">
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
</tr>
实际显示：
此时所有的单元格都有边框
-
3.table-hover
在 <tbody> 内的任一行启用鼠标悬停状态
命令显示：
<table class="table table-bordered table-hover">
实际显示：
鼠标放置的位置会显示灰色
几个命令可以同时并列输入，显示结果会合并功能，
-
4.table-condensed
让表格更加紧凑
命令输入：
<table class="table table-bordered table-hover table-condensed">
显示结果：
表格行与行之间更紧凑
学习体会：
