摘要：
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的，并且给这个添加类名“divider”来实现添加下拉分隔线的功能。 下拉菜单 下拉菜单项 下拉菜单项 下拉菜单项 下拉菜单... 阅读全文
随笔分类 - bootstrap
Bootstrap系列 -- 24. 下拉菜单基本用法
2015-06-25 22:20 by 贺臣, 3214 阅读, 收藏, 编辑
摘要：
在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。而Bootstrap.js 是依赖jQuery库的。所以在引入Bootstrap.js之前要... 阅读全文
Bootstrap系列 -- 23. 图片
2015-06-25 21:07 by 贺臣, 478 阅读, 收藏, 编辑
摘要：
图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格： 1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片 ... 阅读全文
Bootstrap系列 -- 22. 按钮详解
2015-06-25 20:37 by 贺臣, 1005 阅读, 收藏, 编辑
摘要：
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。基本样式 几种不同样式风格的按钮 基础按钮.btn 默认按钮.... 阅读全文
Bootstrap系列 -- 22. 按钮
2015-06-25 20:36 by 贺臣, 638 阅读, 收藏, 编辑
摘要：
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。基本样式 几种不同样式风格的按钮 基础按钮.btn 默认按钮.... 阅读全文
Bootstrap系列 -- 21. 表单提示信息
2015-06-25 11:53 by 贺臣, 1395 阅读, 收藏, 编辑
摘要：
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。 成功状态 你输入的信息是正确的 Bootstrap提供了一个行内提示信息，其使用了类名“help-inline”... 阅读全文
Bootstrap系列 -- 20. 禁用状态
2015-06-25 08:32 by 贺臣, 17491 阅读, 收藏, 编辑
摘要：
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用... 阅读全文
Bootstrap系列 -- 19. 焦点状态
2015-06-25 08:18 by 贺臣, 5256 阅读, 收藏, 编辑
摘要：
表单主要用来与用户沟通，好的表单就能更好的与用户进行沟通，而好的表单一定离不开表单的控件状态。 表单状态的作用： 每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否... 阅读全文
Bootstrap系列 -- 18. 表单控件大小
2015-06-25 08:14 by 贺臣, 11154 阅读, 收藏, 编辑
摘要：
前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1.input-sm:让控件比正常大小更小 2.in... 阅读全文
Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
2015-06-24 22:16 by 贺臣, 3029 阅读, 收藏, 编辑
摘要：
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多。 案例1 ... 阅读全文
Bootstrap系列 -- 16. 文本域textarea
2015-06-24 22:15 by 贺臣, 23336 阅读, 收藏, 编辑
摘要：
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。 阅读全文
Bootstrap系列 -- 15. 下拉选择框select
2015-06-24 20:58 by 贺臣, 43757 阅读, 收藏, 编辑
摘要：
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格 阅读全文
Bootstrap系列 -- 14. 表单控件输入框input
2015-06-24 20:56 by 贺臣, 1471 阅读, 收藏, 编辑
摘要：
每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。 单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型... 阅读全文
Bootstrap系列 -- 13. 内联表单
2015-06-24 20:54 by 贺臣, 1850 阅读, 收藏, 编辑
摘要：
有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在元素中添加类名“form-inline”即可 如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换... 阅读全文
Bootstrap系列 -- 12. 水平表单
2015-06-24 20:50 by 贺臣, 8732 阅读, 收藏, 编辑
摘要：
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右） 在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。 在元... 阅读全文
Bootstrap系列 -- 11. 基础表单
2015-06-24 20:48 by 贺臣, 1093 阅读, 收藏, 编辑
摘要：
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 ... 阅读全文
Bootstrap系列 -- 10. 网格布局
2015-06-24 08:36 by 贺臣, 7103 阅读, 收藏, 编辑
摘要：
一. 实现原理 网格布局是通过容器的大小，平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别。 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中, 以便赋予核实的对齐方式和内间距设置 (2)在行(.row)中可以添加列(... 阅读全文
Bootstrap系列 -- 9. 表格
2015-06-19 22:43 by 贺臣, 1282 阅读, 收藏, 编辑
摘要：
一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式，4个附件样式,1个响应式设计样式 1..table：基础表格 2..table-striped：斑马线表格 3..table-bordered：带边框的表格 4..table-hove... 阅读全文
Bootstrap系列 -- 8. 代码显示
2015-06-19 22:19 by 贺臣, 1730 阅读, 收藏, 编辑
摘要：
一. Bootstrap中的代码块 代码块一般在博客中使用的较多，比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示 1.使用来显示单行内联代码 2.使用来显示多行块代码 3.使用来显示用户输入代码二. code 显示 Bootstrap的code代码风... 阅读全文
Bootstrap系列 -- 7. 列表排版方式
2015-06-19 16:35 by 贺臣, 1311 阅读, 收藏, 编辑
摘要：
一. 去点列表 1. 使用class=list-unstyled 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列... 阅读全文