bootstrap 常用的导航组件

.container 固定宽度，支持响应式（媒体查询）的容器，网页居中效果，且有15px的左右内边；

.container-fluid 用于100%的宽度，占据全部视口的容器，自动实现响应式；

.navbar 导航条，独立组件，有一个背景色、且导航条可以是纯链接、表单、表单和导航一起结合等多种形式；

　　第一层 class中 navbar是必须的其他的属性是可选的；

　　　　　.navbar-default 创建的是最基本的导航，不会固定在哪个位置颜色是透明的；

　　　　　.navbar-inverse类颜色变为黑色；

　　　　　.navbar-fixed-top 固定在顶部 .navbar-fixed-bottom固定在底部；

　　　　　.navbar-header：导航的头比如说网站的logo 点击进去主页，或是网站的名称；

　　　　　.navbar-brand：写在a元素里，让文本看起来更大一号，并且确保无论是宽屏还是窄屏；

　　　　　.navbar-nav：导航条中的导航元素；

　　.nav 导航元素基本组件，通常以一个带有 class .nav的无序列表开始，并且写在nav里，默认选择某个用.active；

　　　　.navbar-btn：导航条中的按钮；

　　　　.navbar-text：文本；

　　　　.navbar-link：链接；

　　　　.navbar-right和.navbar-left将其定位在导航条的左右位置；

　　.collapse：折叠，设置div元素为视口大于768px时显示；折叠的内容必须包裹在带有class .collapse、.navbar-collapse的<div>中；

　　　　.data-toggle：告诉JavaScript需要对按钮做什么；

　　　　.data-target：指示要切换到哪一个元素；

　　　　.collapse-in：默认显示内容；

　　　　三个带有 class .icon-bar 的<span>创建所谓的汉堡按钮，这些会切换为 .nav-collapse <div>中的元素；

　　　　sr-only：（仅供）屏幕阅读器，这个class 主要用于增强accessbility(可访问性)是为了关爱残障人士，但又不会展示出来；

转载于:https://www.cnblogs.com/chengshun/p/7522318.html

bootstrap 常用的导航组件相关推荐

bootstrap下拉框分页_学习使用Bootstrap输入框、导航、分页等常用组件
Bootstrap输入框和导航组件一.下拉菜单下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来. 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置datat ...
Bootstrap V3.3.4 组件
Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...
Bootstrap导航组件
导航 Bootstrap3提供了灵活.多样的导航组件,允许使用相同的标签和不同的类,来实现不同风格的导航,具有非常高的可定制性. Bootstrap3中的导航组件,都是基于列表实现的,可以使用无序列表 ...
30组常用前端开发组件库，前端组件收集整理列表
0. 前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – ...
react-native新导航组件react-navigation详解
react-navigation react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称 ...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件原型展示及下载地址:h ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
Bootstrap学习笔记——导航条、分页导航
1 导航条导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...

bootstrap 常用的导航组件

bootstrap 常用的导航组件相关推荐

最新文章

热门文章