在网页中，经常见到进度条效果，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。 进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本： LESS: progress-bars.less SASS: _progress-bars.scss 基础进度条 实现原理： 需要两个容器，外容器使用类名.progress，子容器使用类名...
按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。 结构方面：使用一个类名为btn-group的容器，把多个按钮放在这个容器中。 按钮组也是一个独立的组件，所以可以找到相应的源码文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button> … <bu...
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理：1、数据行（.row）必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）<div class="container"> <div class="row"></div> </div> 2、在行（.row）中可以添加列（.column），但列数之和不能超过平分的总列数（如：12）<div class="container"> <div...
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 一、用法 您可以向顶部导航添加滚动监听行为： 1、通过 data 属性：向您想要监听的元...
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。 站点引用 Bootstrap 插件的方式有两种： 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 C...
最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示二、BootStrap...
一、JQuery树形控件 Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用，但对于节点的增删改实现起来就不容易了，如果非要做，可能需要自己去封装。 1、一睹初容 全部收起展开一级全部展开2、代码示例 此控件实现起来也非常简单，只需要引用jQuery和bootstrap组件即可。<link href="~/Content...
在介绍select组件的时候，之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章，这两个组件的功能确实很强大，本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了，multiselect这方面是强项。重点介绍下select2的一些特性效果： 一、特性效果 1、多选效果可以设置最多只能选几个2、图文结合的效果3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据） 输入内容前输入...
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class，分别是： img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距（padding）和一个灰色的边框 img-responsive 图片响应式 1、img-rounded <!doctype html> <html lang="en"> <head> <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编...
描述 Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。 什么是必需的 您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。 如何使用它 您可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮。 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以...
本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。 首先给大家介绍什么是字体图标： 字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。 .glyphicon {position: relative;top: 1px;display: inline-block;font-family: Glyphicons Halflings;-webkit-font-smoothing: antialiased;font-style: nor...
aria-label 正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。 如： <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <form role = "form"> <div class="form-group col-lg-3...
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加 role="form"。 把标签和控件放在一个带有 class .form-group ...
一、Bootstrap Table的引入关于Bootstrap Table的引入，一般来说还是两种方法： 1、直接下载源码，添加到项目里面来。 由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。 2、使用我们神奇的Nuget 打开Nuget，搜索这两个包Bootstrap已经是最新的3.3.5了，我们直接安装即可。而Bootstrap Table的版本竟然是0.4，这也太坑爹了。所以博主建议Bootstrap Table的包就直接在源码里面...
最近一段时间在做一个管理系统，在网上找了很久的前端展示框架，终于找到一款基于Bootstrap的后台管理系统模版：Ace。Bootstrap是Twitter 于2010年开发出来的前端框架，用过的同学应该知道，这款前端框架不仅界面很美观，而且兼容了很多的浏览器，大大加速了我们开发网站的速度！这篇文章讲到的Ace是基于Bootstrap的，所以界面自然也非常美观，这款后台管理系统组合了好多插件以及组件，可以满足很大一部分的后台管理系统模版。废话...