Bootstrap
文章平均质量分 62
hellochenlu
这个作者很懒,什么都没留下…
展开
-
Bootstrap 栅格系统
目录1、简介2、栅格选项3、列偏移4、嵌套列5、列排序1、简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。2、栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统,这转载 2015-10-26 09:54:24 · 430 阅读 · 0 评论 -
bootstrap导航条、分页导航学习笔记6-3(为导航条添加标题、二级菜单及状态)
加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现,示例查看代码编辑器(11-22)。原理分析: 此功能主要起一个提醒功能,当然改良一下可以当作是logo(此处不做过多阐述)。其样式主要是加大了字体设置,并且设置了最大宽转载 2015-12-18 14:04:37 · 501 阅读 · 0 评论 -
bootstrap菜单、按钮及导航学习笔记5-18导航(基础样式)
在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可: Home CSS3 Sass jQuery Responsive运行效果如下:垂直堆叠导航与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列转载 2015-12-18 11:06:29 · 344 阅读 · 0 评论 -
bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独立出来成为一个导航组件,根据不同的版本,可以找到对应的源码: ☑ LESS版本:对应的源文件是navs.less转载 2015-12-18 09:29:18 · 593 阅读 · 0 评论 -
bootstrap里的sr-only是什么属性?用途是什么?
全称是 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性)。有时候 UI 上会出现一些仅供视觉识别的元素,比如说“汉堡包菜单按钮”,只有视力正常的人才能清楚辨识这些元素的作用。而残障人士,比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器,也就是 screen reader(s转载 2015-12-18 09:02:01 · 3008 阅读 · 0 评论 -
bootstrap菜单、按钮及导航学习笔记5-3
在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的,并且给这个添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码:/*源码bootstrap.css文件第3034行~第3039行*/.dropdown-menu .divider { height: 1px; margin: 9px 0; o转载 2015-12-17 14:42:46 · 393 阅读 · 0 评论 -
bootstrap菜单、按钮及导航学习笔记5-2
Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,如下所示:因为“dropdown-menu”默认样式设置了“display:none”,其详细源码请查看bootstrap.css文件第3010行~第3029行:.dropdown-menu { position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/ top: 1转载 2015-12-17 14:18:15 · 422 阅读 · 0 评论 -
bootstrap学习笔记-列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。.col-原创 2015-12-17 12:09:33 · 8955 阅读 · 0 评论 -
bootstrap菜单、按钮及导航学习笔记5-1
原文链接:http://www.imooc.com/code/2881小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.scss ☑ 编译后的Bootstrap版本:查看bootst转载 2015-12-17 14:00:49 · 318 阅读 · 0 评论 -
bootstrap表单学习笔记3-1
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的制作。表单源码查询Bootst转载 2015-12-17 15:31:46 · 315 阅读 · 0 评论 -
bootstrap表单学习笔记3-2
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1、在元素是使用类名“form-horizontal”。2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)在元素上使用类名“form-horizontal”主要有转载 2015-12-17 16:02:50 · 473 阅读 · 0 评论 -
bootstrap栅格系统学习笔记
Bootstrap框架的网格系统工作原理如下:1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:container">row">2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如: 4"> 8">3、具体内容应当放置在列容器(原创 2015-12-17 11:01:53 · 417 阅读 · 0 评论 -
bootstrap导航条、分页导航学习笔记6-9(分页导航-带页码的分页导航)
分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航带页码的分页导航带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本: ☑ LES转载 2015-12-21 15:14:10 · 1031 阅读 · 0 评论