bootstrap基础之三
来源:互联网 发布:mac客人用户退出不了 编辑:程序博客网 时间:2024/06/05 00:35
bootstrap3导航
1.表格导航栏或标签
(1)以一个带有.nav的无序列表为开始
(2)添加.nav-tabs样式
胶囊式导航:将(2)的.nav-tabs样式改为.nav-pills样式
2.胶囊式导航垂直模式
在其基础样式后添加.nav-stacked
3.导航栏状态
active hover disabled
4.自适应导航
.nav-justified
5.导航栏的下拉菜单
(1)以一个带有.nav的无序列表为开始,并添加.nav-tabs
(2)再添加带有.dropdown-menus的无序列表
6.面包屑导航
以.breadrumb为开始的无序列表
7.导航条
(1)向<nav> 添加.navbar navbar-default
(2)向上面的<nav>添加role=“navigation”以增加可访问性
(3)在<nav>里嵌入一个<div>加标题样式.navbar-header,在其内部嵌入一个带有.navbar-brand的<a>
(4)为了向导航栏添加链接,只需要简明的添加带有class .nav .navbar-nav的无序列表即可
8.响应式导航栏
(1)给导航栏添加响应式特性,折叠内容必须包裹在一个带有.collapse .navbar-collapse的<div>中
(2)折叠起来的导航栏实际上是一个带有.navbar-toggle以及2个data-元素的<button>。第一个data-toggle,用于告诉js需要对按钮做什么,第二个data-target,指的是要切换到哪一个元素
(3)三个带有class=“icon-bar”的<span>
附加内容组 取反色<nav>中添加.navbar-inverse样式
9.内嵌图片
在内部一个包含<a>标签且带有.navbar-brand后面添加.brand-img
10.导航栏表单
在导航条中内嵌一个<form>样式为.navbar-form
位置调节.navbar-right .navbar-left
11.导航栏的文本和链接
文本:<p calss="navbar-text"></p>
链接:<a calss="navbar-link"></a>
12.固定导航条
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
13.分页导航
使用<ul><li>,在<ul>中使用.pagination
大小:.pagination-lg .pagination-sm
14.标签和徽章
用一个<span class="label label-*" ==>标签 *:deafult primary success info warning danger
<span class="badge">==>徽章
- bootstrap基础之三
- bootstrap学习之基础
- bootstrap基础之二
- Bootstrap入门基础(三)
- Bootstrap 学习之(三) ------ 表格和按钮
- Bootstrap学习笔记之插件(三)
- BootStrap实战三之导航条
- Bootstrap学习之三:使用排版
- HTML笔记(三)bootstrap之表格
- bootstrap学习笔记之导航条基础
- bootstrap学习笔记之基础导航条
- bootstrap系列之二排版基础
- 【Web前端开发】之Bootstrap基础(一)
- Bootstrap(三)
- Bootstrap 基础
- Bootstrap基础
- Bootstrap基础
- bootstrap基础
- varnish4.0 常用配置
- WindowManager对于窗口的管理以及悬浮窗的实现
- toolbar和标题和menu汇总
- c++接口实现
- 树链剖分
- bootstrap基础之三
- 【DP】RQNOJ107[Ural的鹰蛋实验]题解
- 一、FrameBuffer 原理、实现与应用 写屏
- 【deeplearning.ai笔记第二课】2.1 随机梯度下降,批量梯度下降和小批量梯度下降
- 字符串
- PHP+Mysql实现协同办公OA系统源码演示下载
- Jsp内置对象
- 数组元素的有限性验证
- Python爬虫——FileNotFoundError: [WinError 2] 系统找不到指定的文件。