Bootstrap框架(组件)
按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
按钮组中的工具提示和弹出框需要特别的设置
当为 .btn-group
中的元素应用工具提示或弹出框时,必须指定 container: 'body'
选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。
确保设置正确的 role
属性并提供一个 label 标签
为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的 role
属性。对于按钮组合,应该是 role="group"
,对于toolbar(工具栏)应该是 role="toolbar"
。
一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单(比如实际情况,<button>
元素组成的两端对齐排列的按钮组 )或下拉菜单。
此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role
属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用 aria-label
,但是, aria-labelledby
也可以使用。
基本实例
Wrap a series of buttons with .btn
in .btn-group
.
胶囊式标签页
HTML 标记相同,但使用 .nav-pills
类:
导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
两端对齐的导航条导航链接已经被弃用了。
导航条内所包含元素溢出
由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。解决办法如下:
- 减少导航条内所有元素所占据的宽度。
- 在某些尺寸的屏幕上(利用 响应式工具类)隐藏导航条内的一些元素。
- 修改导航条在水平排列和折叠排列互相转化时,触发这个转化的最小屏幕宽度值。可以通过修改
@grid-float-breakpoint
变量实现,或者自己重写相关的媒体查询代码,覆盖 Bootstrap 的默认值。
依赖 JavaScript 插件
如果 JavaScript 被禁用,并且视口(viewport)足够窄,致使导航条折叠起来,导航条将不能被打开,.navbar-collapse
内所包含的内容也将不可见。
响应式导航条依赖 collapse 插件,定制 Bootstrap 的话时候必将其包含。
修改视口的阈值,从而影响导航条的排列模式
当浏览器视口(viewport)的宽度小于 @grid-float-breakpoint
值时,导航条内部的元素变为折叠排列,也就是变现为移动设备展现模式;当浏览器视口(viewport)的宽度大于 @grid-float-breakpoint
值时,导航条内部的元素变为水平排列,也就是变现为非移动设备展现模式。通过调整源码中的这个值,就可以控制导航条何时堆叠排列,何时水平排列。默认值是 768px
(小屏幕 -- 或者说是平板 --的最小值,或者说是平板)。
导航条的可访问性
务必使用 <nav>
元素,或者,如果使用的是通用的 <div>
元素的话,务必为导航条设置 role="navigation"
属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。

默认分页
受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。
对齐链接
你还可以把链接向两端对齐:
徽章
给链接、导航等元素嵌套 <span class="badge">
元素,可以很醒目的展示新的或未读的信息条目。
巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。
Bootstrap框架(组件)的更多相关文章
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- BootStrap框架
简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 详解Bootstrap面板组件
面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...
- 详解Bootstrap缩略图组件及警示框组件
缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
- 详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
- 详解Bootstrap按钮组件
按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮 ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
随机推荐
- Oracle 触发器(一)
1)触发器是一种特殊的存储过程,触发器一般由事件触发并且不能接受参数,存储器由语句块去调用:触发器是当某个事件发生时自动地隐式运行. 2)触发器分类: 1.DML触发器: 创建在表上,由DML事件引发 ...
- Jquery 操作 select 的操作指南
这里我们以一个简单的select作为原型来进行说明: <select> <option value="a1">香蕉1</option> < ...
- 浅析OC语言
学习一门开发语言,首先要掌握的它的基本语法,这可能几天就能学会,但如果要融会贯通,就得去学习这门语言的框架和一些库,再结合一些项目的应用,这可能需要花几年的时间. OC是C语言的一个超集,是一门面向对 ...
- oracle入门(一)
### 一.体系结构 1. 数据库 : 只有一个数据库 2. 实例 : 后台运行的一个进程 3. 表空间: 逻辑存储单位 4. 数据文件: 物理存储单位 5. 用户:面向用户管理,由用户来管理表空间, ...
- js中哪些值会被认为false?
在javascript中,只有 false null undefined 空字符串 即 “” 数字 0 数字 NaN 会被当作false,其余都是真. 注:字符串 “false” 也会被当作真.
- sql 优化的几种方法
.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. .应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而 ...
- Tomcat性能监控
Tomcat性能监控工具很多,这里介绍两种1.JMeter 2.probe,使用这两种工具都需要在tomcat的安装目录/conf/tomcat-users.xml添加 <tomcat-user ...
- ES6 开发规范-最佳实践
ES6 开发规范(最佳实践) 本文为开发规范,收集方便日后查看. [开发规范]https://blog.csdn.net/zzzkk2009/article/details/53171058?utm_ ...
- Python入门 —— 2048实战(字符界面和图形界面)
2048 game (共4种实现方法) 目录: .. 图形界面 ... pygame 和 numpy .. 字符界面 ... 第一种 ... curses ... wxpython ... 第二种 . ...
- 跨域详解之-----Jsonp跨域
一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如 ...