BootStrap的table表格,栅格系统,form表单的样式
BootStrap
BootStrap的简介
1. 什么是Bootstrap
由两个前端设计师开发的一个前端的框架(Html,css,js)
简化了程序员写css的代码
2. 为什么使用BootStrap,有什么特点
l 学习比较简单,有了Html,css和js就能学习
l 响应式布局,可以适应多种的设备
l 移动设备优先
BootStrap的使用
环境的安装
官网上下载包
要想使用bootStrap 必须加载jquery
bootStrap的基本模板
1. Html文档的类型定义
BootStrap的文档是基于HTML5的,因此,要使用HTML的文档类型定义(DTD)
2. 字符集的设置
<meta charset="utf-8">
3. 移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1">
4. 引入css和js文件
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
Css全局样式
1.布局容器样式
l .container 固定宽度且具有响应式
l .container-fluid 自由宽度(100%)
<div class="container">
3. 样式:<h1>到<h6>、h1~h6
H1~H6 样式重写的,几乎做到了兼容性
3.文本样式
1. <b>:加粗
2. <strong>:加粗
3. <i>:斜体
4. <em>:斜体,HTML5新标记
5. <del>:删除线,HTML5新标记
6. <s>:删除线
4. 文本对齐样式
1、 .text-left 本左对齐
2、 .text-right 文本右对齐
3、 .text-center 文本居中对齐
4、 .text-justify 两端对其
5. 列表样式
1、 .list-unstyled 无符号
2、 .list-inline 行内样式
6. 表格样式
1、.table:表格全局样式(少量的padding和水平方向的分割线)。
2、.table-striped:有条纹的背景色行(隔行变色)
3、.table-boedered:点边框的表格
4、.table-hover:鼠标悬停效果(放上变色、离开恢复)
5、.table-condensed:紧凑的表格(单元格内不会减半)
6、行或单元格背景色:.active、.success、.info、.warning、.danger
.active 当前样式
.success
.info
.warning
.danger
注意只能给<tr><td>添加颜色
7、响应式表格
将.table元素包裹在.table-responsive元素内,即可创建响应式表格
当屏幕宽度小于你的表格的时候,表格会出现滚动条
当屏幕宽度大于你的表格的时候,表格的滚动条自然消失
7. 表单样式
1、.form-group 表单组样式:将<label>和表单元素包含其中,你可以获得更好的排列。
2、.form-control 表单元素:常用于<input>、<textarea>、<select>元素
alceholder属性:给<input>添加提示信息
3、.form-inline 内联表单样式(用于form元素):可以使元素一行排列
4、.sr-only:用于隐藏元素
5、.radio-inline 可以使一组单选框排在同一行
6、.checkbox-inline 可以使一组复选框排在同一行
7、.checkbox 复选框样式
8、.radio 单选框样式
9、.disable 可以禁用单选框或者复选框的样式
10、.help-block 帮助信息(与上面间隔,字体颜色变浅)
CSS的全局样式----栅格系统
栅格系统介绍
BootStrap提供了一套响应式、移动设备优先的流式的栅格系统
BootStrap把一个容器或整个网页平均分成12列
BootStrap的栅格系统,由一个行(.row)和多个列组成
栅格系统通过行列的形式来创建网页的布局,把具体的数据放入列当中
注意:栅格系统必须放在.container和.container-fluid之中
栅格系统参数
Col-xs-* 超小屏幕
Col-sm-*小屏幕
Col-md-*中等屏幕
Col-lg-*大屏幕
栅格系统的简单应用
注意:列数超过12列会自动换行
列偏移
也就是指:一个栏向右偏移多少
.col-md-offset-*
.col-md-offset-2 //指定栏向右偏移2个列 思想就是加上了一个左外边距
列嵌套
在某个栏中再嵌套一个完整栅格系统
8. 按钮样式:
1、 可作为按钮使用的元素:<a> 、<input>、<button>
2、 .btn:按钮的全局样式 <input type=”button” class=”btn”>
3、 预定义样式:.btn-default、.btn-primary、.btn-info、.btn-waring、.btn-danger、.btn-link
4、 .active 按钮激活状态、.disabled 按钮禁用样式
5、 按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮)
6、 .btn-block:将按钮拉伸到撑满整个父元素
BootStrap的table表格,栅格系统,form表单的样式的更多相关文章
- html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)
切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...
- HTML之表格标签和form表单
表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- vue使用elementUI form表单label样式修改
更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...
- 【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...
- 如何通过submit提交form表单获取后台传来的返回值
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
随机推荐
- 从块级元素和行内元素的分析到bfc的布局理解
接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...
- Gradle及eclipse插件安装
1. 下载Gradle Gradle需要jdk7或以上版本,使用Java –version命令进行测试:Gradle自带了Groovy库,所以无需再安装Groovy,已经安装的Groovy会被Gra ...
- BZOJ3451 Tyvj1953 Normal 【期望 + 点分治 + NTT】
题目链接 BZOJ3451 题解 考虑每个点产生的贡献,即为该点在点分树中的深度期望值 由于期望的线性,最后的答案就是每个点贡献之和 对于点对\((i,j)\),考虑\(j\)成为\(i\)祖先的概率 ...
- [pool www] user has not been defined
[02-Dec-2014 00:28:58] ALERT: [pool www] user has not been defined [02-Dec-2014 00:28:58] ERROR: fai ...
- poj1204 Word Puzzles
Word Puzzles Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 12090 Accepted: 4547 S ...
- vim切换显示器乱行问题解决
http://note.youdao.com/noteshare?id=ccdad950ca154a6b1597cbe2ede07b81
- Linux常用网络工具:路由扫描之mtr
除了上一篇<Linux常用网络工具:路由扫描之traceroute>介绍的traceroute之外,一般Linux还内置了另一个常用的路由扫描工具mtr. mtr在某些方面比tracero ...
- centos6.5 mqtt安装
CentOs 6.5 MQTT 安装部署 所需安装包: libwebsockets-v1.6-stable.tar.gz,mosquitto-1.4.8.tar.gz 1.安装依赖 # yum -y ...
- HDU 3977 斐波那契循环节
这类型的题目其实没什么意思..知道怎么做后,就有固定套路了..而且感觉这东西要出的很难的话,有这种方法解常数会比较大吧..所以一般最多套一些比较简单的直接可以暴力求循环节的题目了.. /** @Dat ...
- this new call() apply()
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...