Bootstrap
官小飞
hello everybody,hello everyone。
展开
-
深入理解BootStrap -- 学习从现在开始1
当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很原创 2016-01-05 14:53:29 · 1936 阅读 · 0 评论 -
深入理解BootStrap -- 面板(panel)17
1、面板面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码:☑ Less版本:对应的源码文件是 panels.less☑ Sass版本:对应的源码文件是 _panels.scss☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行~第5302行原创 2016-01-07 09:23:32 · 29769 阅读 · 5 评论 -
深入理解BootStrap -- 列表组(list-group)16
1、列表组列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码:☑ LESS版本:对应的源码文件 list-group.less☑ Sass版本:对应的源码文件是 _list-group.scss☑ 编译出的Bootstrap版原创 2016-01-07 09:19:01 · 14093 阅读 · 0 评论 -
深入理解BootStrap -- 媒体对象(media)15
在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示:我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件:☑ LESS版本:对应的源文件是media.less原创 2016-01-07 09:12:01 · 5243 阅读 · 0 评论 -
深入理解BootStrap -- 进度条(progressbar)14
1、进度条在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果:进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本:☑ LESS版本:源码文件progress-bars.less☑ Sass版本:源码文件_progress-bars.scss☑ 编译后版本:boots原创 2016-01-06 14:09:09 · 8070 阅读 · 1 评论 -
深入理解BootStrap 缩略图(thumbnail)与警示窗(alert)13
1、缩略图缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。源码文件:☑ LESS版本:对应文件thumbnails.less☑ Sass版本:对应文件_t原创 2016-01-06 14:07:18 · 2952 阅读 · 0 评论 -
深入理解BootStrap -- 标签(label)与徽章(badge)12
1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。既然他是一个独立的组件,当然在不同的版本下有不同的文件:☑ LES原创 2016-01-06 14:00:14 · 11578 阅读 · 0 评论 -
深入理解BootStrap -- 导航页(navbar)11
1、导航条导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色(显示更突出)、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。导航条和导航一样,在Bootstrap框原创 2016-01-06 10:12:11 · 2813 阅读 · 0 评论 -
深入理解BootStrap -- 导航(nav)10
1、导航(基础样式)导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独立出来成为一个导航组件,根据不同的版本,可以找到对应的源码:☑ LESS版本:对应的源文件是nav原创 2016-01-06 09:51:39 · 8601 阅读 · 0 评论 -
深入理解BootStrap -- 按钮组工具栏9
1、按钮(按钮组)单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。源码查询:按钮组也是一个独立的组件,所以可以找到对应的源码文件:☑ LESS版本:对应的源文件为buttons.less☑ Sa原创 2016-01-06 09:30:36 · 1916 阅读 · 0 评论 -
深入理解BootStrap-- 下拉菜单8
1、下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:☑ LESS版本:对应的源码文件为 dropdowns.less☑ Sass版本:对应的源码文件为 _dropdowns.sass☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行在使用B原创 2016-01-06 09:19:20 · 1707 阅读 · 0 评论 -
深入理解BootStrap-- 栅格系统(布局)7
1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:原创 2016-01-06 09:17:55 · 46312 阅读 · 3 评论 -
深入理解BootStrap -- 按钮6
前言本文主要讲解的是按钮的样式。1.选项2.尺寸3.活动状态4.禁用状态5.可做按钮使用的Html标签6.总结选项 使用上面列出的class可以快速创建一个带有样式的按钮。 "button" class="btn btn-default">Default "button"原创 2016-01-05 17:07:06 · 1178 阅读 · 0 评论 -
深入理解BootStrap -- 表单5
前言本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本9.总结基本案例 单独的表单控件会被自动赋予一些全局样式。所有原创 2016-01-05 16:58:13 · 2080 阅读 · 0 评论 -
深入理解BootStrap -- 表格4
前言本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示:1.基本案例2.条纹状表格3.带边框的表格4.鼠标悬停5.紧缩表格6.状态class7.响应式表格8.原创 2016-01-05 15:21:03 · 1638 阅读 · 0 评论 -
深入理解BootStrap -- 基础排版3
前言本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。主要内容如下:1.标题2.页面主体3.强调4.缩略语5.地址6.引用7.列表8.总结标题Html中的所有标题标签,从到均可使用。另外还提供了.h1到.h6的class,为的原创 2016-01-05 15:08:14 · 1846 阅读 · 0 评论 -
深入理解BootStrap -- 简单入门2
从http://www.bootcss.com/中文网不难发现现在是针对两个版本进行文档说明,看来两个版本的差别还是蛮大的。不过从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以也没什么好说的了,学习Bootstrap3也没什么顾虑了。这里之前也有一篇关于VS2013更新内容的简单介绍http://www.cn原创 2016-01-05 14:58:37 · 1226 阅读 · 0 评论 -
深入理解BootStrap -- js插件概览(API)18
1、Bootstrap 插件概览在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插原创 2016-01-07 09:28:20 · 2005 阅读 · 0 评论