![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
文章平均质量分 95
小平果118
我是一匹奔腾的野马,需要你来征服。。。。。
展开
-
深入理解BootStrap Item6 -- 按钮
前言本文主要讲解的是按钮的样式。1.选项2.尺寸3.活动状态4.禁用状态5.可做按钮使用的Html标签6.总结选项 使用上面列出的class可以快速创建一个带有样式的按钮。 "button" class="btn btn-default">Default "button"转载 2015-11-13 15:15:39 · 1195 阅读 · 1 评论 -
深入理解BootStrap Item16 -- 列表组(list-group)
1、列表组列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码:☑ LESS版本:对应的源码文件 list-group.less☑ Sass版本:对应的源码文件是 _list-group.scss☑ 编译出的Bootstrap版本:对应的源码boots原创 2015-11-18 20:20:11 · 17501 阅读 · 0 评论 -
深入理解BootStrap Item17 -- 面板(panel)
1、面板面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码:☑ Less版本:对应的源码文件是 panels.less☑ Sass版本:对应的源码文件是 _panels.scss☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行~第5302行2、面板–基础面板基础面板非常简单原创 2015-11-18 20:54:23 · 6404 阅读 · 1 评论 -
深入理解BootStrap Item18 -- js插件概览(API)
1、Bootstrap 插件概览在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不原创 2015-11-18 21:36:27 · 5900 阅读 · 1 评论 -
深入理解BootStrap Item14 -- 进度条(progressbar)
1、进度条在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果:进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本:☑ LESS版本:源码文件progress-bars.less☑ Sass版本:源码文件_progress-bars.scss☑ 编译后版本:bootstrap.css文件第4500行~第4575行而且原创 2015-11-18 16:05:36 · 8491 阅读 · 0 评论 -
深入理解BootStrap Item13 -- 缩略图(thumbnail)与警示窗(alert)
1、缩略图缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。源码文件:☑ LESS版本:对应文件thumbnails.less☑ Sass版本:对应文件_thumbnails.scss☑原创 2015-11-17 10:29:02 · 6727 阅读 · 2 评论 -
深入理解BootStrap Item11 -- 导航页(navbar)
导航条导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色(显示更突出)、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。导航条和导航一样,在Bootstrap框架中是一个独立组件,所原创 2015-11-15 17:29:01 · 11218 阅读 · 0 评论 -
深入理解BootStrap Item12 -- 标签(label)与徽章(badge)
1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。既然他是一个独立的组件,当然在不同的版本下有不同的文件:☑ LESS版本:对应的源文件label.les原创 2015-11-15 20:30:58 · 6049 阅读 · 0 评论 -
深入理解BootStrap Item10 -- 导航(nav)
1、导航(基础样式)导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独立出来成为一个导航组件,根据不同的版本,可以找到对应的源码:☑ LESS版本:对应的源文件是navs.less☑ Sass版原创 2015-11-15 11:17:36 · 13716 阅读 · 0 评论 -
深入理解BootStrap Item8 -- 下拉菜单
1、下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:☑ LESS版本:对应的源码文件为 dropdowns.less☑ Sass版本:对应的源码文件为 _dropdowns.sass☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行在使用Bootstrap框架的下拉菜单时,必原创 2015-11-14 14:16:12 · 3143 阅读 · 2 评论 -
深入理解BootStrap Item7 -- 栅格系统(布局)
1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:原创 2015-11-14 09:48:35 · 7121 阅读 · 5 评论 -
深入理解BootStrap Item9 -- 按钮组工具栏
1、按钮(按钮组)单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。源码查询:按钮组也是一个独立的组件,所以可以找到对应的源码文件:☑ LESS版本:对应的源文件为buttons.less☑ Sass版本:对应的源文件为_button原创 2015-11-14 16:01:14 · 2980 阅读 · 0 评论 -
深入理解BootStrap Item3 -- 基础排版
前言本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。主要内容如下:1.标题2.页面主体3.强调4.缩略语5.地址6.引用7.列表8.总结标题Html中的所有标题标签,从到均可使用。另外还提供了.h1到.h6的class,为的转载 2015-11-12 22:04:11 · 2137 阅读 · 1 评论 -
深入理解BootStrap Item1 -- 学习从现在开始
前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootS转载 2015-11-12 21:44:12 · 2595 阅读 · 1 评论 -
深入理解BootStrap Item4 -- 表格
前言本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示:1.基本案例2.条纹状表格3.带边框的表格4.鼠标悬停5.紧缩表格6.状态class7.响应式表格8.转载 2015-11-12 22:15:02 · 2001 阅读 · 1 评论 -
深入理解BootStrap Item5 -- 表单
前言本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容:1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本9.总结基本案例 单独的表单控件会被自动赋予一些全局样式。所有转载 2015-11-13 10:59:11 · 2258 阅读 · 1 评论 -
深入理解BootStrap Item2 -- 简单入门
前言在上一节中http://blog.csdn.net/i10630226/article/details/49805123主要是简单的介绍了一下Bootstrap。从http://www.bootcss.com/中文网不难发现现在是针对两个版本进行文档说明,看来两个版本的差别还是蛮大的。不过从Visual Studio 2013前不久的更新中看,微软是将Bootstrap转载 2015-11-12 21:55:45 · 1905 阅读 · 1 评论 -
深入理解BootStrap Item15 -- 媒体对象(media)
在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示:我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件:☑ LESS版本:对应的源文件是media.less☑ Sass版本:对应的源文件是原创 2015-11-18 16:56:30 · 2310 阅读 · 0 评论