博客专栏  >  Web前端   >  深入理解BootStrap

深入理解BootStrap

本专栏主要包括网格布局系统、预定义CSS样式、内置界面组件和交互式JavaScript插件。

关注
16 已关注
18篇博文
  • 深入理解BootStrap Item18 -- js插件概览(API)

    1、Bootstrap 插件概览在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 ...

    2015-11-18 21:36
    4855
  • 深入理解BootStrap Item17 -- 面板(panel)

    1、面板面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码:☑ Less版本:对应的源码文件是 panel...

    2015-11-18 20:54
    1835
  • 深入理解BootStrap Item16 -- 列表组(list-group)

    1、列表组列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源...

    2015-11-18 20:20
    5316
  • 深入理解BootStrap Item15 -- 媒体对象(media)

    在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示:我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,可以用来构建不同类型的组件。这...

    2015-11-18 16:56
    863
  • 深入理解BootStrap Item14 -- 进度条(progressbar)

    1、进度条在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果:进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本:...

    2015-11-18 16:05
    3094
  • 深入理解BootStrap Item13 -- 缩略图(thumbnail)与警示窗(alert)

    1、缩略图缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”...

    2015-11-17 10:29
    2343
  • 深入理解BootStrap Item12 -- 标签(label)与徽章(badge)

    1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:那么在Bootstr...

    2015-11-15 20:30
    1673
  • 深入理解BootStrap Item11 -- 导航页(navbar)

    导航条导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色(显示更突出)、而且导...

    2015-11-15 17:29
    2017
  • 深入理解BootStrap Item10 -- 导航(nav)

    1、导航(基础样式)导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何...

    2015-11-15 11:17
    2353
  • 深入理解BootStrap Item9 -- 按钮组工具栏

    1、按钮(按钮组)单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstr...

    2015-11-14 16:01
    1032
  • 深入理解BootStrap Item8 -- 下拉菜单

    1、下拉菜单(基本用法)小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:☑ LESS版本:对应的源码文件为 dropdowns.less☑ S...

    2015-11-14 14:16
    1819
  • 深入理解BootStrap Item7 -- 栅格系统(布局)

    1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中...

    2015-11-14 09:48
    2593
  • 深入理解BootStrap Item6 -- 按钮

    前言 本文主要讲解的是按钮的样式。 1.选项 2.尺寸 3.活动状态 4.禁用状态 5.可做按钮使用的Html标签 6.总结 选项   使用上面列出的class可以快速创建一个...

    2015-11-13 15:15
    756
  • 深入理解BootStrap Item5 -- 表单

    前言 本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4...

    2015-11-13 10:59
    952
  • 深入理解BootStrap Item4 -- 表格

    前言 本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准...

    2015-11-12 22:15
    853
  • 深入理解BootStrap Item3 -- 基础排版

    前言 本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。主要内容如下: 1.标题 2.页面主体 3.强调 ...

    2015-11-12 22:04
    1198
  • 深入理解BootStrap Item2 -- 简单入门

    前言 在上一节中http://blog.csdn.net/i10630226/article/details/49805123主要是简单的介绍了一下Bootstrap。从http://www.boo...

    2015-11-12 21:55
    1066
  • 深入理解BootStrap Item1 -- 学习从现在开始

    前言      当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter...

    2015-11-12 21:44
    1725
img博客搬家
img撰写博客
img专家申请
img意见反馈
img返回顶部