随笔分类 -  Bootstrap

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

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

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

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

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

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

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

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

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

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

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