Bootstrap基础学习(一)—表格与按钮
一、Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。
二、Bootstrap 特点
Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1)跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的 IE7、8。
(2)响应式布局
不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。
(3)提供的全面的组件
Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
(4)内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种
常规特效。
(5)支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性，都得到很好的支持。
(6)支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能
很好的配合开发。
三、排版样式
Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。
1.页面主体
Bootstrap 将全局 font-size 设置为14px，line-height 行高设置为 1.428(即20px)，<p>段落元素被设置等于 1/2 行高(即 10px)，颜色被设置为#333。
<p>Bootstrap测试1</p>
<p>Bootstrap测试2</p>
<p>Bootstrap测试3</p>
<p>Bootstrap测试4</p>
效果:
2.标题
我们从firebug查看元素了解到，Bootstrap 分别对h1 ~ h6进行了CSS样式的重构，在 h1 ~ h6 元素之间，还可以嵌入一个 small元素作为副标题。
<h1>Bootstrap <small>h1样式 </small></h1>
<h2>Bootstrap <small>h2样式 </small></h2>
<h3>Bootstrap <small>h3样式 </small></h3>
<h4>Bootstrap <small>h4样式 </small></h4>
<h5>Bootstrap <small>h5样式 </small></h5>
<h6>Bootstrap <small>h6样式 </small></h6>
效果:
3.对齐
设置文本对齐。
<!-- 居左 -->
<p class="text-left">Bootstrap 框架</p>
<!-- 居中 -->
<p class="text-center">Bootstrap 框架</p>
<!-- 居右 -->
<p class="text-right">Bootstrap 框架</p>
效果:
4.引用文本
<blockquote>
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、 Bootstrap 布局组件
和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
</blockquote>
效果:
5.列表排版
<ul class="list-inline">
<li>Spring</li>
<li>Struts2</li>
<li>SpringMVC</li>
<li>Mybatis</li>
<li>Hibernate</li>
</ul>
效果:
四、表格
1.基本格式
<!-- 1.基本格式 -->
<table class="table">
<thread>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>BBB</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
效果:
2.条纹状表格
让<tbody>里的行产生一行隔一行加单色背景效果。
<!-- 2.条纹状表格 -->
<table class="table table-striped">
<thread>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>BBB</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>CCC</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>4</td>
<td>DDD</td>
<td>女</td>
<td>23</td>
</tr>
</tbody>
</table>
效果:
3.带边框表格
<!-- 3.带边框的表格 -->
<table class="table table-bordered">
<thread>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>BBB</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
效果:
4.悬停鼠标
让<tbody>下的表格悬停鼠标实现背景效果。
<!-- 4.悬停鼠标 -->
<table class="table table-hover">
<thread>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>BBB</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
效果:
5.状态类
可以单独设置每一行的背景样式。有active、success、info、warning、danger。
<!-- 5.状态类 -->
<table class="table table-hover">
<thread>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr class="success">
<td>1</td>
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr class="active">
<td>2</td>
<td>BBB</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="info">
<td>3</td>
<td>CCC</td>
<td>女</td>
<td>21</td>
</tr>
<tr class="warning">
<td>4</td>
<td>DDD</td>
<td>女</td>
<td>23</td>
</tr>
<tr class="danger">
<td>5</td>
<td>EEE</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
效果:
五、按钮
1.样式
<!-- 样式 -->
<button class="btn btn-default">默认样式</button> <br><br>
<button class="btn btn-success">成功样式</button> <br><br>
<button class="btn btn-info">信息样式</button> <br><br>
<button class="btn btn-warning">警告样式</button> <br><br>
<button class="btn btn-danger">危险样式</button>
效果:
2.尺寸大小
<!-- 尺寸大小 -->
<button class="btn btn-info">Button</button>
<button class="btn btn-info btn-lg">Button</button>
<button class="btn btn-info btn-sm">Button</button>
<button class="btn btn-info btn-xs">Button</button>
效果:
3.激活与禁用状态
<!-- 激活状态与禁用状态 -->
<button class="btn btn-info active">Button</button>
<button class="btn btn-info active diabled">Button</button>
效果:
Bootstrap基础学习(一)—表格与按钮的更多相关文章
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【排版】（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- bootstrap基础学习【网格系统】（三）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习小记（二）排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...
- 【Bootstrap基础学习】00 序
其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...
- bootstrap基础学习五篇
bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
随机推荐
- CSS3 3D的总结（初学者易懂）
CSS3 3D案例的总结 如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...
- Linux less命令详解
less 在Linux下查看文件内容的命令大致有以下几种: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容,并将所有内容输出 more 根据窗口大小,一页一页的现实文件 ...
- 《Shell脚本学习指南》学习笔记之变量、判断和流程控制
变量 定义变量 可以使用export和readonly来设置变量,export用于修改或打印环境变量,readonly则使得变量不得修改.语法: export name[=word] ... read ...
- 安全体系（三）——SHA1算法详解
本文主要讲述使用SHA1算法计算信息摘要的过程. 安全体系(零)—— 加解密算法.消息摘要.消息认证技术.数字签名与公钥证书 安全体系(一)—— DES算法详解 安全体系(二)——RSA算法详解 为保 ...
- dfs算法
一般bfs算法都是使用递归 //下面简单的代码 visited[Max]; dfs(_graph g,int vo){ print(vo); visited[vo]=1 for(int i=0;i&l ...
- Vmware虚拟机设置静态IP地址
一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子网掩码和网关,后面修改静态IP会用到. ...
- loadrunner入门篇-Analysis 分析器
analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大量用来分析性能测试结果的数据图,但并不一定要对每个视图进行分析,可以根据实际情况选择相关的数据视图进行分析, ...
- SQLSERVER2008 错误18456
我遇到的问题,已经解决,如果你遇到不能解决可以咨询我 1.以windows验证模式进入数据库管理器. 第二步:右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码(改成个好记的).把强制实施密 ...
- elastic search 学习 一
初步阅读了elastic search 的文档,并使用command实践操作. 大概明白其概念模型.
- Hibernate之关联映射(一对多和多对一映射，多对多映射)
~~~接着之前的Hibernate框架接着学习(上篇面试过后发现真的需要学习以下框架了,不然又被忽悠让去培训.)~~~ 1:Hibernate的关联映射,存在一对多和多对一映射,多对多映射: 1.1: ...