Bootstrap实用功能总结
导航栏:navbar
导航栏容器可以包含以下几个常用组成:
1、品牌LOGO(.navbar-brand )
2、导航菜单(.navbar-nav)
3、导航文本(.navbar-text)
4、折叠导航按钮(.navbar-toggle)
5、表单(.form-inline)
一、导航容器一般使用nav标签来定义:
<nav class="navbar">...</nav>
导航容器可用样式:
.navbar |
导航栏基础样式 |
---|---|
.navbar-expand-{sm | md | xl | lg} |
响应式导航,大屏幕水平铺开,小屏幕垂直堆叠 |
.flex-top |
导航栏一直在顶部 |
.flex-bottom |
导航栏一直在顶部 |
.bg-{primary | secondary | success | info | danger | warning | dark | light} |
导航栏的背景颜色 |
.navbar-dark |
导航配色方案。深色背景,加此样式可以突显文字 |
.navbar-light |
导航配色方案。浅色背景,加此样式可突显文字 |
二、导航菜单一般使用ul、li来定义:
1 <nav class="navbar navbar-expand-md bg-light nav-light">
2 <ul class="navbar-nav">
3 <li class="nav-item active"><a href="#" class="nav-link ">菜单一</a></li>
4 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
5 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
6 </ul>
7 </nav>
导航菜单可用样式:
.navbar-nav |
应用于ul标签 |
---|---|
.nav-item 、 .active |
应用于li标签 |
.nav-link 、 .disabled |
应用于a标签 |
三、导航栏中加品牌元素(.navbar-brand):
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
4
5 <!-- 菜单 -->
6 <ul class="navbar-nav">
7 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
8 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
9 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
10 </ul>
11 </nav>
品牌可以是文字,也可以是图片。
四、导航文本类(.navbar-text),使用该类可以保证文字与导航样式统一:
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
4 <!-- 菜单 -->
5 <ul class="navbar-nav">
6 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
7 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
8 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
9 </ul>
10 <span class="navbar-text">这是一句文字</span>
11 </nav>
五、折叠导航:小屏幕上我们都会折叠导航栏,通过点击来显示导航选项:
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
4
5 <!-- 定义折叠按钮 -->
6 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu">
7 <span class="navbar-toggler-icon"></span>
8 </button>
9
10 <!-- 把菜单包含在容器内 -->
11 <div class="collapse navbar-collapse" id="nav-menu">
12 <ul class="navbar-nav">
13 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
14 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
15 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
16 </ul>
17 </div>
18 </nav>
折叠导航注意事项:
1、定义折叠按钮时除了折叠的属性之外,还必须加上样式: .navbar-toggler
2、折叠按钮内加上折叠图标,样式: .navbar-toggler-icon
3、菜单要包含一个容器内,容器必须包含样式: .collapse 和 .navbar-collapse
六、导航内加表单时,一定要把表单加上内联样式(.form-inline)
导航一般采用ul、li来定义,否则有些效果无法实现,比如动态选项卡效果。
基础样式:
1 <ul class="nav">
2 <li class="nav-item"><a href="#" class="nav-link">导航一</a></li>
3 </ul>
导航样式及属性:
ul 标签可用样式及属性 |
|
---|---|
.nav |
导航基类 |
.nav-tabs |
选项卡导航 |
.nav-pills |
胶囊导航 |
.nav-justified |
导航均分宽度 |
.flex-column |
垂直导航 |
.justify-content-start | .justify-content-center | .justify-content-end |
导航选项的对齐方式: .justify-content-start 默认,左对齐 .justify-content-center 居中对齐 .justify-content-right 右对齐 |
li 标签可用样式及属性 |
|
.nav-item |
指定一个选项 |
.dropdown |
指明该选项是一个下拉菜单(下拉菜单也可以不用指定) |
a标签可用样式及属性 |
|
.nav-link |
指定导航链接 |
.active |
当前激活的导航链接 |
.disabled |
禁用的导航链接 |
data-toggle = "{tab | pill }" |
定义一个动态选项卡 或 动态胶囊选项卡 |
href = "#id" |
动态导航时,指明要显示的容器ID |
动态选项卡容器样式 |
|
.tab-pane |
动态选项卡容器类,必须要加 |
动态下拉选项卡示例:
1 <div class="container">
2 <h3>定义动态下拉选项卡</h3>
3 <ul class="nav nav-tabs" role="tablist">
4 <li class="nav-item"><a href="#con1" class="nav-link active" data-toggle="tab">选项一</a></li>
5 <li class="nav-item dropdown">
6 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉选项</a>
7 <div class="dropdown-menu">
8 <a href="#" class="dropdown-item">下拉一</a>
9 <a href="#" class="dropdown-item">下拉二</a>
10 </div>
11 </li>
12 <li class="nav-item"><a href="#con2" class="nav-link" data-toggle="tab">选项二</a></li>
13 <li class="nav-item"><a href="#con3" class="nav-link" data-toggle="tab">选项三</a></li>
14 <li class="nav-item"><a href="#" class="nav-link disabled">禁用选项</a></li>
15 </ul>
16
17 <div class="tab-content"> <!-- 这个类是必须的,否则异常 -->
18 <div id="con1" class="tab-pane active">
19 选项一内容
20 </div>
21 <div id="con2" class="tab-pane fade"><!-- fade 必须加 -->
22 选项二内容
23 </div>
24 <div id="con3" class="tab-pane fade"><!-- fade 必须加 -->
25 选项三内容
26 </div>
27 </div>
28 </div>
注意:
一)选项卡标签对应内容需注意事项:
a) 要放置在类:tab-content 的容器下,这是必需的,否则会出现异常。
b)必须添加 .tab-pane 类
c) 用.active表明当前选项卡内容。其它一定要加载 .fade 类。
【详解】模态框(modal)的使用
【详解】提示框(tooltip)的使用
【详解】弹出框(popover)的使用
justify-content-{around | between | start | center | end }内容对齐
rounded-{0 | top | right | bottom | left | circle } 边角半径设置
bootStrap实现垂直居中
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 判断是否"存在",还在用count?试试这条SQL语句,性能杠杠的!
- protoBuf-python学习笔记
- 编写高质量可维护的代码之优化逻辑判断
- Owl项目
- 非Spring项目如何注入Mapper
- Raspberry Pi开发实战
- Vulnhub之DC-2过关记录
- 关于链表,你该了解这些!
- R语言可视化操作数据挖掘
- 因为一个函数strtok踩坑,我被老工程师无情嘲笑了(一)
- 【日志架构】ELK Stack + Kafka 端到端练习
- 极客算法训练笔记(三),链表详细图解,别再逃避了朋友
- 我就感觉到快 —— zsh 和 oh my zsh 冷启动速度优化
- equals和HashCode深入理解(转)
- LeetCode18|排序链表