随笔分类 -  Bootstrap

bootstrap框架
详解Bootstrap面板组件
摘要:面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-bo... 阅读全文

posted @ 2016-05-03 22:50 洛水三千 阅读(18326) 评论(4) 推荐(3)

详解Bootstrap列表组组件
摘要:列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组... 阅读全文

posted @ 2016-05-01 12:50 洛水三千 阅读(15829) 评论(0) 推荐(1)

详解Bootstrap媒体对象
摘要:在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.less SASS: _media.scss 媒体对象一般是成组出现,一组媒体对象一般包括以下几部分: 1、媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media 2、媒体对象的对象:... 阅读全文

posted @ 2016-04-30 16:30 洛水三千 阅读(2905) 评论(0) 推荐(1)

详解Bootstrap进度条组件
摘要:在网页中,进度条的效果并不少见,如:平分系统、加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持,Opera 12 不支持 animation 属性。 进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本: LESS: progress-bars.less SASS: _p... 阅读全文

posted @ 2016-04-29 17:13 洛水三千 阅读(20430) 评论(3) 推荐(4)

详解Bootstrap缩略图组件及警示框组件
摘要:缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件: LESS : tbumbnails.less SASS : _tbumbnails.scss 实现原理: 布... 阅读全文

posted @ 2016-04-28 16:59 洛水三千 阅读(7784) 评论(0) 推荐(3)

详解Bootstrap表单组件
摘要:表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset、legend、label标签进行了定制 除了这个几个元素之外,还 阅读全文

posted @ 2016-04-26 12:11 洛水三千 阅读(51723) 评论(2) 推荐(7)

详解Bootstrap网格系统
摘要:bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理: 1、数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding) 2、在 阅读全文

posted @ 2016-04-25 12:32 洛水三千 阅读(26610) 评论(12) 推荐(14)

详解Bootstrap导航组件
摘要:在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形导航是通过.nav-tabs样式来实现的,在制作标签形导航时需要在原导航类名为.nav的容器上追加类名. 阅读全文

posted @ 2016-04-24 21:56 洛水三千 阅读(9121) 评论(2) 推荐(2)

详解Bootstrap按钮组件(二)
摘要:按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group bootstrap.css文件 按钮的向下向上三角形 按钮的向下三角形,是通过在button标签中添加span标签元素,且类名为.caret 这个三角 阅读全文

posted @ 2016-04-24 19:31 洛水三千 阅读(1219) 评论(0) 推荐(0)

详解Bootstrap按钮组件
摘要:按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。 结构方面:使用一个类名为btn-gr 阅读全文

posted @ 2016-04-22 18:27 洛水三千 阅读(3895) 评论(0) 推荐(0)

详解Bootstrap下拉菜单组件
摘要:bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scss 在使用bootstrap矿建的下拉菜单时,必须调用bootstrap框架提供的bootstrap 阅读全文

posted @ 2016-04-22 14:30 洛水三千 阅读(47093) 评论(0) 推荐(0)

导航