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> 为表格添加基础样式. < ...
随机推荐
- MSSQL数据批量插入优化详细
序言 现在有一个需求是将10w条数据插入到MSSQL数据库中,表结构如下,你会怎么做,你感觉插入10W条数据插入到MSSQL如下的表中需要多久呢? 或者你的批量数据是如何插入的呢?我今天就此问题做个探 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件（2）
今天我们讨论SuperWebClient组件使用中的几个简单主题 1: UserAgent2: Cookies3: POST登录 1:UserAgent这个是客户端标识信息,此信息是用于鉴别正在访问W ...
- 下载安装Cygwin
下载程序 http://www.cygwin.com/ 安装程序 下载完成后,运行setup.exe程序,出现安装画面. 直接点“下一步”,出现安装模式的对话框,如下图所示: 这里可以看到有三种安装模 ...
- lxd-启动篇分析
lxd是什么:lxd是基于lxc构筑的容器管理进程,提供镜像,网络,存储,以及容器的能力,对外暴漏restfull API.其与docker的区别是docker更切近与app container,以应 ...
- 抓包工具Wireshark的使用
WireShark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息. WireShark界面简介 启动WireShark的界面如下: 选择网卡 wireshar ...
- Azure Messaging-ServiceBus Messaging消息队列技术系列4-复杂对象消息是否需要支持序列化和消息持久化
在上一篇中,我们介绍了消息的顺序收发保证: Azure Messaging-ServiceBus Messaging消息队列技术系列3-消息顺序保证 在本文中我们主要介绍下复杂对象消息是否需要支持序列 ...
- 本机安装mysql服务,步骤教程(另附SQLyog和Navicat工具)
因为这段时间不是装系统就是换硬盘,导致装了还几次MySql,每次都记不住都要上网找教程,着实麻烦,所以这次干脆直接写到博客上好了,便于自己也便于他人: 百度云:http://pan.baidu.com ...
- 1622: [Usaco2008 Open]Word Power 名字的能量
1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 370 Solved: 18 ...
- 剑指offer_(4)
重建二叉树: 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍 ...