Bootstrap
文章平均质量分 86
guo-snowstorm
在校学生
展开
-
Bootstrap 小图标
在内联元素上应用对应的样式即可(glyphicon glyphicon-*),例如: 效果:又例如: Home LIbrary Applications Mics 效果:原创 2016-03-15 21:29:56 · 3070 阅读 · 0 评论 -
Bootstrap 弹出框
弹出框是一种特殊的提示框,只是多了一个title标题而已。另外,提示框的默认触发事件是hover和focus,而弹出框的默认触发事件是click,和提示框一样,需要手工JS代码来初始化:$(‘[data-toggle=popover]’).popover();示例代码: $(function () { $('[data-toggle=popover]').popover();原创 2016-03-17 21:34:19 · 872 阅读 · 0 评论 -
Bootstra 警告框
用于根据用户操作的上下文为用户提供灵活的提示消息,.alert样式为此提供了基础的操作样式。一、默认警告框关闭按钮要确保设置button元素的属性值data-dismiss=“alert”,因为警告框的关闭功能是通过JavaScript检测该属性实现的,示例代码: × Warning!Best check you self , you are looking too goo原创 2016-03-17 14:27:55 · 908 阅读 · 0 评论 -
Bootst 按钮
btn不仅支持button元素,也能够支持a和input元素,不过强烈建议不过任何情况下,都使用butto,以免出现跨浏览器的兼容性问题。比如,Firefox浏览器下就有一个bug,导致无法为标签按钮设置line-height,其结果就是这种按钮和普通的按钮高度不一致。一、Bootstrap默认提供了7种样式的按钮风格,代码如下:DefaultPrimarySuccess原创 2016-03-14 22:03:19 · 961 阅读 · 0 评论 -
Bootstrap 折叠
折叠插件实现的效果是:但单击一个触发元素时,在另外一个可折叠区域进行显示(或隐藏),再次单击时可以反转显示状态。一、声明式用法声明一个触发按钮和一个折叠区域,示例代码:默认显示折叠区域:触发按钮这是折叠区域!!默认隐藏折叠区域:触发按钮 这是折叠区域说明:.collapsed样式是表示该插件所对应的demo区域已经处于隐藏状态了,而collapse和in两个样式原创 2016-03-18 09:34:59 · 3215 阅读 · 0 评论 -
Bootstrap 旋转轮播
旋转轮播的主要显示效果就像各大网站的多幅滚动广告一样,比如天猫首页、淘宝首页、京东首页的大图标,默认情况是循环向左轮播,如果单击某一个小方块的话,会直接显示所单击的那张图。Bootstrap基于CSS3实现动画过渡效果,所以IE 8、IE 9不支持这些效果。先看示例代码:原创 2016-03-18 10:53:52 · 3768 阅读 · 0 评论 -
Bootstrap整体架构
大多数Bootstrap的使用者都认为Bootstrap只提供了CSS组件和JavaScript插件,其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式而已,它们都是构建在基础平台之上的,它的整体架构图,如图所示:12栅格系统是整个Bootstrap的核心功能,也是响应式设计核心理念的一个实现形式。Bootstrap所有的JavaScript插原创 2016-03-10 22:43:27 · 1912 阅读 · 0 评论 -
BootStrap 之 $(selector).data()
很多JS插件里都使用了$(selector).data()方法,它的意思是收集指定元素上的所有以data-开头的自定义属性,并合并成为一个对象字面量。data-开头的自定义属性是HTML5新支持的语法。例如:如果要获取data-role里aaa这个值,则需要调用如下代码:$(”’#abc”).data(“role”);如果是不带参数的$(”’#abc”).data();,则表示一次原创 2016-03-10 22:25:28 · 1064 阅读 · 0 评论 -
Bootstrap 栅格系统
Bootstrap栅格系统默认将水平方向平分为12等份,结合媒体查询可制作出强大的响应式栅格系统,简单易用。一、下面是基本结构: ...分析此结构如下:1、最外层container,为了实现栅格的响应式特性,开发者利用container的div区分4种类型的浏览器(超小屏、小屏、中屏、大屏),像素分界点是768px原创 2016-03-13 10:48:40 · 837 阅读 · 0 评论 -
Bootstrap之CSS架构的设计思想
整体上,不同名的样式可以叠加到一起使用,同名的样式,后面的会覆盖前面的,从而到达组合应用的效果,整个CSS组件有8大类型的样式,然后根据每个组件的特性,来组装这些类型的特性,从而达到丰富多彩的配置效果,如下图所示:原创 2016-03-13 15:04:31 · 2168 阅读 · 0 评论 -
Bootstrap的JavaScript插件实现步骤
Bootstrap里提供的所有js插件都遵守了统一的实现步骤,这使得维护插件、学习和自定义其他插件都很方便,定义一个js插件的5个步骤如下:原创 2016-03-14 09:31:19 · 675 阅读 · 0 评论 -
Bootstrap 表格
Bootstrap表格一个基础样式:.table(必须),四种附加样式(可选):.table-striped、.table-bordered、.table-hover、.table-condensed,一个响应式布局容器类:.table-responsive。一、基础样式: col1col2col2 row1#col1row1#col2row1#col3 row2#col1r原创 2016-03-14 19:20:55 · 1021 阅读 · 0 评论 -
Bootstrap 表单
Bootstrap 将表单内的fieldset、legend、label标签的margin、padding、border等进行了细化设置,其他没啥。注意:1、form-contro样式使input、select、textarea样式显示宽度为100%,placeholder的颜色为#9999992、form-group样式提供了一个margin-bott:15px的底部外边距,用于使每原创 2016-03-14 20:13:20 · 835 阅读 · 0 评论 -
Bootstrap 辅助样式
Bootstrap在布局方面还提供了一些细小的辅助样式,用于文字颜色及背景色设置、显示关闭图标、向左浮动、向右浮动、清除浮动、隐藏、显示等功能。一、文本样式与背景样式Bootstrap提供了6种统一的样式颜色,分别是:柔和灰(text-muted)、主要蓝(text-primary)、成功绿(text-success)、信息蓝(text-info)、警告黄(text-warning)、危险原创 2016-03-14 22:29:10 · 1277 阅读 · 0 评论 -
Bootstrap 提示框
一般是鼠标移动到特定的元素上时,显示相关的提示语,当然可以改为单击时等其他交互操作。在使用之前,一定要单独使用JavaScript语句激活提示框:$(‘[data-toggle=tooltip]’).tooltip();示例代码: 左侧Tooltip 上方Tooltip 底部Tooltip 右侧Tooltip效果:提示框组件的声明式属性:Jav原创 2016-03-17 21:11:28 · 1581 阅读 · 0 评论 -
Bootstrap 滚动侦测
滚动侦测插件是根据滚动的位置自动更新导航条中相应的导航项,就是滚动滑动条,当滑动到相应位置时,导航条中的相应项就会高亮。一、声明式用法:1、设置滚动容器,即在所要侦测的元素上设置data-target=”#selector”、“data-spy=“scroll”属性2、设置菜单链接容器,该容器的id(或样式)和data-target属性所对应的选择符应一致。3、在菜单容器内,必须有原创 2016-03-17 20:36:29 · 1665 阅读 · 0 评论 -
Bootstrap 模态弹窗
模态弹窗(Modal)是绝大部分交互式网都需要的一种功能,一般有一下几种用法:1、提示信息、警告信息、大文本等。2、确认提示(多按钮);3、显示表单元素(一般使用ajax操作等功能);4、其他需要特使显示的信息(如单击缩略图时放大图片)一、基本用法代码结构如下:click me × Modal标题原创 2016-03-17 19:58:48 · 1122 阅读 · 0 评论 -
Bootstrap 按钮组
按钮组(Button group)的基本用法很简单,只需要在多个按钮外部使用一个容器元素(比如div),然后在容器元素上应用.btn-group样式即可示例代码:LeftMiddleRightLeftMiddleRight效果:二、按钮工具栏按钮工具栏主要是将多个按钮组排列在一起,例如,1、2、3、4是一个分组,5、6、7是一个分组,8单独是一个分原创 2016-03-16 08:49:10 · 601 阅读 · 0 评论 -
Bootstrap 下拉菜单
网页交互的时候经常需要上下文菜单或者隐藏/展示菜单项,Bootstrap提供了下拉菜单的设置方法。只有在菜单的父元素上应用.open样式(当单击“下拉菜单”按钮的时候,会自动在.dropdown样式的div元素上再次附加一个.open样式)并且该元素设定为position:relative(直接使用.dropdown样式)的时候,下拉菜单才会正常显示,注意:设置菜单标题,则为li元素应用.原创 2016-03-15 21:37:44 · 1070 阅读 · 0 评论 -
Bootstrap 输入框组
有些时候,我们需要将文本输入框(Input group)和文字或者小icon组合在一起进行显示(我们称之为addon),只需要在容器上应用.inputgroup样式,然后对需要在input前后显示的个性元素上应用.input-groupaddon样式即可。一、基本用法代码如下; $ .00 ¥ .00 效果入下:注意:请尽量避免在sele原创 2016-03-16 20:00:47 · 2953 阅读 · 0 评论 -
Bootstr 导航
导航是一个网站最重要的组成部分,可以便于用户查找网站所提供的各项功能服务,和默认的.btn样式相同,默认的.nav样式不提供默认的导航,必须通过附加另一个样式才行,比如.nav-tabs样式表示选项卡导航。一、选项卡导航选项卡导航是最常用的一种导航方式,尤其是在多内容编辑的时候,需要通过选项卡进行分组显示,实例代码: 主页 个人信息 作品 图书效果:注意,如果需要原创 2016-03-16 21:04:29 · 600 阅读 · 0 评论 -
Bootstrap 导航条
导航条与导航的区别就是多了一个“条”,就是菜单项背后有一个可以看见的背景条。一、基础导航条在普通导航的ul元素上应用.navbar-nav样式,然后在外部父元素容器上应用.navbar样式以及.navbar-default样式即可,navbar-brand是导航条标题,放在navbar-hearder容器中,示例代码: Brand 主页 个人信息 作品 图书 效果:原创 2016-03-17 08:41:41 · 916 阅读 · 0 评论 -
Bootstrap 面包屑导航
面包屑(Breadcrumb)一般用于导航,表示当前页面所在的位置(或功能插件),示例代码如下: Home Library Data 效果:原创 2016-03-17 10:26:54 · 1340 阅读 · 0 评论 -
Bootstr 分页导航
Bootstrap提供了两种分页组件,一种是带多个页码的组件(pagination),一种是只有上一页、下一页的翻页组件(pager)一、页码分页组件普通的页码分页组件,中间是页码,两头分别是上一页和下一页的链接(应该需要结合js代码才能实现实际的效果),实例代码: 1 2 3 4 5 >> 效果:(1)可以给l原创 2016-03-17 10:29:36 · 350 阅读 · 0 评论 -
Bootstrap 标签
需要高亮一些标题里额特使字符或者整个字符,可以使用.label样式,注意实际发现单独使用label样式时,没有效果,需要配合其他labe-*样式才可以!示例代码:JavaScript权威指南NewJavaScript权威指南NewJavaScript权威指南NewJavaScript权威指南NewJavaScript权威指南NewJavaScript权威指南New效果:原创 2016-03-17 11:15:41 · 486 阅读 · 0 评论 -
Bootstrap 徽章、大屏幕展播、页面标题、缩略图
一、Bootstrap徽章用于显示一些最新收到的消息、需要多少审批的消息等,给span样式应用.badge样式即可,示例代码:JavaScript权威指南58效果:给它加一个pull-left样式:h1>JavaScript权威指南span class="badge pull-left">58span>h1>效果:注意:用户可以自己定义它的大小,背景色等。。。。原创 2016-03-17 11:37:25 · 1810 阅读 · 0 评论 -
Bootstrap 进度条
进度条(Progress bar)是一个比较常见的网页效果,一般用于表示加载、跳转或动作正在执行中的状态。一、基础样式需要两个样式,progress用于设置进度条的容器样式,而progress-bar用于限制进度条的进度(颜色进度),示例代码: 效果:二、多彩样式progress-bar-info(信息蓝)、progress-bar-success(成功原创 2016-03-17 14:59:02 · 499 阅读 · 0 评论 -
Bootstrap列表组
一、基础列表组大部分的列表组都是有无标记的列表(ul/li)来实现的,示例代码: JavaScript权威指南 JavaScript语言精粹 JavaScript设计模式 JavaScript程序设计 JavaScript编程精解 效果:二、应用徽章标记和小图标可以在li元素上应用徽章标记或小图标,示例代码: JavaScript权原创 2016-03-17 16:09:13 · 899 阅读 · 0 评论 -
Bootstrap 面板
一、基础面板在div上应用panel样式,产生一个具有边框的文本框效果。示例代码: 面板header 这里是面板内容 面板footer 效果:注意,面板的header和footer是可选的,pannel样式不控制主题颜色,pannel-default才是控制颜色的主题,pannel-body样式,专门用于存放文本内容。二、多彩面板panel-primary原创 2016-03-17 17:06:15 · 675 阅读 · 0 评论 -
Bootstrap 洼地
洼地(Well)样式的效果和大屏幕展播Jumbotron样式类似,不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。示例代码:div class="well"> p> sorry I have no word to sayp> blockquote>this is a 引用内容blockquote>div>效果:可以设置洼地的大小:原创 2016-03-17 17:16:20 · 466 阅读 · 0 评论 -
Bootstrap 动画过渡效果
Bootstrap默认给各组件提供了基本的动画过渡效果,值得注意的是,Bootstrap使用的动画过渡效果全部使用了CSS3的语法,所以IE6、IE7、IE8是不能用动画过渡效果了。默认情况下,以下组件使用了动画过渡效果:1、模态弹窗(Modal)的滑动和渐变效果;2、选项卡(Tab)的渐变效果;3、警告框(Alert)的渐变效果;4、旋转轮播(Carousel)的滑动效果。原创 2016-03-17 17:31:54 · 11576 阅读 · 0 评论 -
Bootstrap的几种预定义默认样式
Bootstrap预定义了一些样式,Bootstrap1.0使用的是以前的重置样式表,但是Bootstrap2.0使用Nicolas Gallagher写的Normalize.css,HTML5 Boilerplate使用的也是这个样式,这个样式表包含在bootstrap.css中特别值得注意的是以下几种默认样式,它们专门针对排版和链接:1)从body中去掉了margin,这样内容就会紧贴原创 2016-05-12 09:06:54 · 2832 阅读 · 0 评论