目录
巨幕
下拉菜单
输入框
导航
导航条
巨幕
与代码块的样式 相似 ! 在巨幕中出现的所有文本都会被放大 !
实现步骤: 给div添加class=“jumbotron”
案例:
下拉菜单
使用步骤:
1. 创建一个div (下拉菜单的容器) , 指定class="dropdown" 或 class="dropup"
2. 在上述创建的div中, 添加两个子元素
- 第一个子元素是点击的按钮 , 点击完毕弹出菜单 ,就是一个普通的按钮样式 !
- 第二个子元素是弹出的菜单 , 是一个ul , 包含了一个个的li
3. 修改按钮
- 给按钮添加属性: data-toggle="dropdown"
- (可选的)给按钮添加一个向下的箭头 , 按钮中添加一个span标签, 指定class=caret
4. 修改ul(弹出的菜单)
- ul标签添加class="dropdown-menu"
- li中的每一个菜单项,都必须被超链接包含
案例:
弹出菜单
下拉菜单的样式调整
设置菜单向上触发
设置菜单项在屏幕的右侧
设置弹出菜单的标题
在多个菜单选项之间, 添加分割线
每一个分割线都是一个li , class=“divider”
设置某选项为 禁用
设置禁用选项li的class=“disabled”
设置菜单 默认显示
在最外层的div中指定class=“dropdown open”
分裂式下拉菜单
按钮组合 - 分裂式下拉菜单
步骤:
1. 编写一个下拉菜单(按钮仅包含一个箭头)
2. 修改下拉菜单的 外层div的class=“btn-group”
3. 在菜单最外层的div中, 前置一个按钮即可
案例:
输入框组合 - 分裂式下拉菜单
步骤:
1. 编写一个下拉菜单(按钮仅包含一个箭头)
2. 修改下拉菜单的 外层div的class=“input-group-btn”
3. 给当前编写的整个下拉菜单, 添加父元素div , 并指定class=“input-group”
4. 给新添加的父div 前置子元素, 输入框, 输入框的class值为:form-control
案例:
导航
基本导航
步骤:
1. 编写一个ul , 指定class=“nav”
2. ul中添加一个个的li , li中包含一个个的超链接
案例:
横向基本导航
步骤:
1. 编写一个ul , 指定class=“nav nav-tabs”
2. ul中添加一个个的li , li中包含一个个的超链接
案例:
横向撑满容器的导航
步骤:
1. 编写一个ul , 指定class=“nav nav-tabs nav-justified”
2. ul中添加一个个的li , li中包含一个个的超链接
案例:
横向胶囊导航
步骤:
1. 编写一个ul , 指定class=“nav nav-pills”
2. ul中添加一个个的li , li中包含一个个的超链接
案例:
垂直胶囊导航
步骤:
1. 编写一个ul , 指定class=“nav nav-pills nav-stacked”
2. ul中添加一个个的li , li中包含一个个的超链接
案例:
在导航中 加入下拉菜单
将导航的某一个选项, 更改为下拉菜单的样式 !
我们在编写导航时, 是ul包含li
在编写下拉菜单时, 最外层的父元素 是 div
li与div都是块元素 !
总结: 在导航中加入下拉菜单的方式, 就是将导航中的一个li 当作下拉菜单的div来编写!
注意: 下拉菜单中的按钮 , 不再使用span标签 , 而是使用超链接标签, 并取消按钮样式 !
案例:
内容切换导航
步骤:
案例:
我们这里是一个正经的网站
志向是天才的幼苗,经过热爱劳动的双手培育,在肥田沃土里将成长为粗壮的大树。不热爱劳动,不进行自我教育,志向这棵幼苗也会连根枯死。确定个人志向,选好专业,这是幸福的源泉。 —— 苏霍姆林斯基
亚洲
欧美
日韩
国产
更多
更多内容, 请开启svip
附加导航
步骤:
1. 通过栅格系统, 实现左右两个div的分割, 2:10
- 左侧div 用于编写附加导航 , 需指定id属性值
- 右侧div 用于编写内容
2. 在左侧的div中, 加入普通的垂直导航
- 给导航的ul标签 添加属性: data-spy="affix"
3. 在右侧div中, 与导航选项关联的位置, 添加元素, 并指定id !
4. 修改左侧div中的每一个导航项的超链接, 连接到指定的内容的#id
5. 修改body , 绑定导航到网页上
给body添加属性:
data-spy="scroll" data-target="#左侧div的id"
6. 给导航中默认的选项li , 设置class="active"
...
...
...
...
导航条
基本导航条
一般用于网页顶部 与 底部的导航菜单 !
使用步骤:
1. 编写一个nav标签 指定class="navbar navbar-default"
2. 向nav标签中, 加入ul标签 ,class="nav navbar-nav"
3. 向ul标签中 加入一个个的li , li的内容是超链接
案例:
向导航条中 加入其它内容
添加标题
在nav标签中, 前置一个div , class=“navbar-header” , div中包含一个span ,span的class=“navbar-brand” , span的内容就是标题
添加表单
步骤:
1. 给导航条中, 正常加入一个form表单 , 指定form标签的class=“navbar-form”
2. 可选操作: 建议将表单中的输入组件与提交按钮, 设置为组合输入框!
控制导航中每个元素 的显示位置:
- 居左 : class=“navbar-left”
- 居右 : class=“navbar-right”
可以通过给nav中所有子元素添加栅格系统的方式, 来给导航条的内容, 添加边距 !
有时需要在导航中 加入一些文字 , 会发现这些文字与导航的部分 不对齐
给文字添加父元素span , 指定span的class=“navbar-text”
案例:
固定导航条
取消了导航条的圆角 !
根据设置的不同, 固定在网页顶部 或 底部
- 顶部: 添加nav标签的class=“navbar-fixed-top”
- 底部: 添加nav标签的class=“navbar-fixed-bottom”
静态导航
仅仅是取消了导航条的圆角
添加nav标签的class=“navbar-static-top”