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 ...
随机推荐
- 【TopCoder10697】RabbitNumbering
[TopCoder10697]RabbitNumbering 题面 Vjudge 给定\(n\)个数,每个数的范围是\([1,ai]\),求所有数都不同的方案数. 题解 把这个直接当做一个套路来用 对 ...
- mysql数据库----索引补充
1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引种类 普通索引:仅加速查询 唯一索引:加速查询 + 列值唯一(可以有 ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1)A B C 水 并查集 思路
A. Bear and Big Brother time limit per test 1 second memory limit per test 256 megabytes input stand ...
- python之numpy矩阵库的使用(续)
本文是对我原先写的python常用序列list.tuples及矩阵库numpy的使用中的numpy矩阵库的使用的补充.结合我个人现在对线性代数的复习进度来不断更博. Section 1:行列式的计算 ...
- [io benchmark]常用磁盘基准/压力测试工具
Unix Disk I/O Benchmarks fio - NEW! fio is an I/O tool meant to be used both for benchmark and stres ...
- 9.Android UiAutomator正则表达式的使用
一.正则表达式元字符: 1.一些常用元字符: 元字符 描述 . 表示任意一个字符 \s 空格字符(空格键.tab.换行.换页.回车) \S 非空字符串([^\s]) \d 一个数字(相当于[0-9]中 ...
- 全表 or 索引
这一篇文章证实了以前对MySQL优化程序的工作原理. MySQL就像一个人一样,总是聪明的去选择当前最快的方式去查询,而不是像Oracle数据那样死板地根据规格去查询. 查询的要求在于快.而对于数据库 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
- NOIP模拟赛11
T1 [HAOI2016]放棋子 https://daniu.luogu.org/problem/show?pid=3182 障碍交换行不影响 所以第i列有障碍的行换到第i行 然后错排公式 本校自测要 ...
- 百度搜索URL中的参数都是什么
最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...