按钮 1、基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button > 2、预定义样式.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link {color/background-color/border-color} 3、尺寸 .btn-lg .btn-md .btn-sm .btn-xs {padding/font-size/line-height/border-radius} .btn-block {display/width} 4、激活状...
Bootstrap表格 表格类： .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; .table-border会为所有的表格添加边框; .table-condensed让表格更加紧凑; tr,td,th类 .active让某一行单元格或者行处于激活状态; .success表示成功的样式; .warn...
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理： 1、数据行（.row）必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding） 2、在行（.row）中可以添加列（.column），但列数之和不能超过平分的总列数（如：12） 3、具体内容应当放在列容器（.colum...
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下前端设计（好别扭），网站的颜色搭配不那么理想。你可以自己改...
表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本： LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset、legend、label标签进行了定制 fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;borde...
缩略图组件 缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件： LESS : tbumbnails.less SASS : _tbumbnails.scss 实现原理： 布局的实现主要依靠于bootstrap框架的网格系统，下面是缩略图对应的样式 ...
Bootstrap输入框组 主要记住一个原则 创建输入框的步骤 把前缀或后缀元素放在一个带有 class .input-group 的 中。 接着，在相同的 内，在 class 为 .input-group-addon 的 内放置额外的内容。 把该 放置在 元素的前面或者后面。 面包屑导航： 面包屑导航主要的属性就是在ul或者li加上breadcrumb属性。 分页和翻页： 以下是制作分页和翻页的小例...
在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。 进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本： LESS: progress-bars.less SASS: _progress-bars.scss 基础进度条 实现原理： 需要两个容器，外容器使用类名.prog...
使用bootstrap很久了，内置的 glyphicons 图标，足以满足 小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到 对应的elment 后，得知他是使用的 CSS 伪元素技术。 .glyphicons 定义了 所有 glyphicons 图标字体的样式 .glyphicons{ position: relative; top: 1px; display: inline-block; font-family: Gly...
bootstrap辅助类 总结几个常用的辅助类 .text-hide将页面元素所包含的文本设置为透明并且字体设置为0所以文本就看不见了 .hidden将页面的元素visible属性设置为hidden; .close可以将页面元素显示为关闭按钮; .caret显示下拉式功能,个人感觉做下拉菜单比较有用. 清除元素浮动使用clearfix,所谓浮动就是让元素在一行显示. 响应式实用工具 响应式实用工具目前...
面板组件主要作用是用来处理一些其他组件无法完成的功能，在不同的版本中具有不同的源码： LESS：panels.less SASS:_panels.scss 基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容 .panel主要对边框、间距、圆角、左右一定的设置： ...
我在media-body里面写media-bottom，元素没有去到底部，不知道什么情况 打令夜视单反人气指数 40% Complete (success) 回复讨论(解决方案) 木有人啊啊来帮帮我啊啊！ 唉好几天了都没人 唉真的没人啊
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加： .breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding...
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标。如下图： 但是在将图标放入input输入框中，这些小图标是无法获得点击事件的； 那么问题来了，怎样让这些小图标能够获得点击事件呢？ 我也不知道，但是可以用一种迂回的方式，来间接的实现该功能。 重点来了： 在小图标的位置上，添加一个看不见的元素，元素的大...
源码分析： Dropdowns.scss：下拉框模块 Javascripts/bootstrap/dropdown.js：实现下拉框响应 实现功能及原理： 下拉选项卡，默认不能实现显示选中项的功能 原理： 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。2、 需要js插件的支持 源码分析： 1、caret：实现向下的三角形，利用边框实现的 1.1、边框...