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表单的样式的更多相关文章

  1. html5之table嵌入form表单布局(务必注意:table标签必须在form表单内部,不能再form表单外部!)

    切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug 原文地址:https://blog.csdn.net/weixin_43343144/a ...

  2. HTML之表格标签和form表单

    表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...

  3. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  4. vue使用elementUI form表单label样式修改

    更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...

  5. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  6. 如何通过submit提交form表单获取后台传来的返回值

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  9. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

随机推荐

  1. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

  2. Gradle及eclipse插件安装

    1.  下载Gradle Gradle需要jdk7或以上版本,使用Java –version命令进行测试:Gradle自带了Groovy库,所以无需再安装Groovy,已经安装的Groovy会被Gra ...

  3. BZOJ3451 Tyvj1953 Normal 【期望 + 点分治 + NTT】

    题目链接 BZOJ3451 题解 考虑每个点产生的贡献,即为该点在点分树中的深度期望值 由于期望的线性,最后的答案就是每个点贡献之和 对于点对\((i,j)\),考虑\(j\)成为\(i\)祖先的概率 ...

  4. [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 ...

  5. poj1204 Word Puzzles

    Word Puzzles Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 12090   Accepted: 4547   S ...

  6. vim切换显示器乱行问题解决

    http://note.youdao.com/noteshare?id=ccdad950ca154a6b1597cbe2ede07b81

  7. Linux常用网络工具:路由扫描之mtr

    除了上一篇<Linux常用网络工具:路由扫描之traceroute>介绍的traceroute之外,一般Linux还内置了另一个常用的路由扫描工具mtr. mtr在某些方面比tracero ...

  8. centos6.5 mqtt安装

    CentOs 6.5 MQTT 安装部署 所需安装包: libwebsockets-v1.6-stable.tar.gz,mosquitto-1.4.8.tar.gz 1.安装依赖 # yum -y ...

  9. HDU 3977 斐波那契循环节

    这类型的题目其实没什么意思..知道怎么做后,就有固定套路了..而且感觉这东西要出的很难的话,有这种方法解常数会比较大吧..所以一般最多套一些比较简单的直接可以暴力求循环节的题目了.. /** @Dat ...

  10. this new call() apply()

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...