bootstrap记录
2016-08-20 13:15
323 查看
学习bootstrap就像重温css一样!
各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高
1.标题
定义标题都是使用标签<h1>到<h6>,class:h1-h6
2.标题(2)
<small>,class:small
3.段落 <p>
让一个段落p突出显示,可以通过添加类名“lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
4.使用<b>和<strong>标签让文本直接加粗。
5.使用标签<em>或<i>来实现斜体
6.强调类
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
7.文本对齐风格(text-align)
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
8.列表结构主要有三种:有序列表、无序列表和定义列表
类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表
<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
9.代码
1、<code>:一般是针对于单个单词或单个句子的代码
2、<pre>:一般是针对于多行代码(也就是成块的代码)。<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格
类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
3、<kbd>:一般是表示用户要通过键盘输入的内容
10.表格table
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
11.表格行tr:颜色不同
.active: 表示当前活动的信息
.success:表示成功或者正确的行为
.info:表示中立的信息或行为
.warning:表示警告,需要特别注意
.danger:表示危险或者可能是错误的行为
12.表单form
正常表单:是垂直分布的。
水平表单:要实现水平表单效果,必须满足以下两个条件:
在<form>元素是使用类名“form-horizontal”。
配合Bootstrap框架的网格系统。(后面讲解)
内联表单:要将表单的控件都在一行内显示:<form>元素中添加类名“form-inline”
13.复选框和单选框
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
14.水平排列复选框或单选框
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
15.按钮button
.btn btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-inverse btn-link
类定义按钮的背景颜色:与text类似。
多标签支持:a span div input的submit
按钮大小:btn-lg btn-sm btn-xs
类名“btn-block”按钮使用这个类名就可以让按钮充满整个容器:块状按钮
活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)。禁用状态:disabled
16.表单的大小
input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
17.form-control
<input><legend><fieldset><textarea>...类名`form-control`,也就是说表单元素使用了类名“form-control”。
将会实现一些设计上的定制效果 width:100% .<input>表单的类型type必须有。
产生焦点状态的效果
表单控件:添加disabled属性。 禁用手型变成了不准输入的形状。对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的 。
18.表单验证
.has-warning:警告状态(黄色)
.has-error:错误状态(红色)
.has-success:成功状态(绿色)
表单验证的时候,不同的状态会提供不同的 icon。 添加类名“has-feedback”即可追加结果图标.
<span class="glyphicon glyphicon-ok form-control-feedback"></span>图标代码
"help-block"样式,将提示信息以块状显示,并且显示在控件底部。与表单在一个块中。<span>标签中写提示信息。
"help-inline"样式,行内提示信息。可以用网格系统代替。
19.图像
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
20.图标
类名:glyphicon
glyphicon-search...<span class="glyphicon glyphicon-search"></span>一种搜索图标
各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高
1.标题
定义标题都是使用标签<h1>到<h6>,class:h1-h6
2.标题(2)
<small>,class:small
3.段落 <p>
让一个段落p突出显示,可以通过添加类名“lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
4.使用<b>和<strong>标签让文本直接加粗。
5.使用标签<em>或<i>来实现斜体
6.强调类
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
7.文本对齐风格(text-align)
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
8.列表结构主要有三种:有序列表、无序列表和定义列表
类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表
<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
9.代码
1、<code>:一般是针对于单个单词或单个句子的代码
2、<pre>:一般是针对于多行代码(也就是成块的代码)。<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格
类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
3、<kbd>:一般是表示用户要通过键盘输入的内容
10.表格table
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
11.表格行tr:颜色不同
.active: 表示当前活动的信息
.success:表示成功或者正确的行为
.info:表示中立的信息或行为
.warning:表示警告,需要特别注意
.danger:表示危险或者可能是错误的行为
12.表单form
正常表单:是垂直分布的。
水平表单:要实现水平表单效果,必须满足以下两个条件:
在<form>元素是使用类名“form-horizontal”。
配合Bootstrap框架的网格系统。(后面讲解)
内联表单:要将表单的控件都在一行内显示:<form>元素中添加类名“form-inline”
13.复选框和单选框
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
14.水平排列复选框或单选框
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
15.按钮button
.btn btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-inverse btn-link
类定义按钮的背景颜色:与text类似。
多标签支持:a span div input的submit
按钮大小:btn-lg btn-sm btn-xs
类名“btn-block”按钮使用这个类名就可以让按钮充满整个容器:块状按钮
活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)。禁用状态:disabled
16.表单的大小
input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
17.form-control
<input><legend><fieldset><textarea>...类名`form-control`,也就是说表单元素使用了类名“form-control”。
将会实现一些设计上的定制效果 width:100% .<input>表单的类型type必须有。
产生焦点状态的效果
表单控件:添加disabled属性。 禁用手型变成了不准输入的形状。对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的 。
18.表单验证
.has-warning:警告状态(黄色)
.has-error:错误状态(红色)
.has-success:成功状态(绿色)
表单验证的时候,不同的状态会提供不同的 icon。 添加类名“has-feedback”即可追加结果图标.
<span class="glyphicon glyphicon-ok form-control-feedback"></span>图标代码
"help-block"样式,将提示信息以块状显示,并且显示在控件底部。与表单在一个块中。<span>标签中写提示信息。
"help-inline"样式,行内提示信息。可以用网格系统代替。
19.图像
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
20.图标
类名:glyphicon
glyphicon-search...<span class="glyphicon glyphicon-search"></span>一种搜索图标
相关文章推荐
- bootstrap中文文档阅读记录
- Bootstrap 貌似不错,先做一下记录
- 学习Bootstrap知识记录点①
- (代码记录)bootstrap tagsinput 基本功能DEMO
- 几个页面的问题一起记录了/el表达式判断/<c:import>传值/BootstrapDialog.show关闭时刷新/
- bootstrap 记录保留
- [学习][记录][转]JS组件系列——Form表单验证神器: BootstrapValidator
- 【Pig】Python3.6/Django1.9.13/Bootstrap/AmazeUI/Echarts后台Web开发阶段记录
- BootStrap教程记录002-环境的搭建
- bootstrap-datetimepicker使用记录
- 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
- Bootstrap学习记录-2.container和table
- Bootstrap相关资源记录
- bootstrap工具提示类排错记录
- bootstrap 常用记录
- bootstrap使用记录
- 积跬步,聚小流------Bootstrap学习记录(2)
- 【问题记录1】bootstrap columns 属性中隐藏某列的属性
- 桂电在线-转变成bootstrap版2(记录学习bootstrap)
- bootstrap记录