目录
巨幕
下拉菜单
输入框
导航
导航条
巨幕
与代码块的样式 相似 ! 在巨幕中出现的所有文本都会被放大 !
实现步骤: 给div添加class=“jumbotron”
案例:
巨幕中的h3标题
巨幕中的普通文本内容
下拉菜单
使用步骤:
1. 创建一个div (下拉菜单的容器) , 指定class="dropdown" 或 class="dropup"
2. 在上述创建的div中, 添加两个子元素
- 第一个子元素是点击的按钮 , 点击完毕弹出菜单 ,就是一个普通的按钮样式 !
- 第二个子元素是弹出的菜单 , 是一个ul , 包含了一个个的li
3. 修改按钮
- 给按钮添加属性: data-toggle="dropdown"
- (可选的)给按钮添加一个向下的箭头 , 按钮中添加一个span标签, 指定class=caret
4. 修改ul(弹出的菜单)
- ul标签添加class="dropdown-menu"
- li中的每一个菜单项,都必须被超链接包含
案例:
<div class="dropdown">
<span data-toggle="dropdown" class="btn btn-success">弹出菜单<span class="caret"></span></span>
<ul class="dropdown-menu">
<li><a href="#">笔记</a></li>
<li><a href="#">代码</a></li>
<li><a href="#">课件</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
下拉菜单的样式调整
-
设置菜单向上触发
- 将外层div设置为 class=“dropup”
-
设置菜单项在屏幕的右侧
- ul标签添加class=“dropdown-menu-right”
-
设置弹出菜单的标题
- 给ul内部前置一个新的li ,li的内容是文本 , 指定li的class=“dropdown-header”
-
在多个菜单选项之间, 添加分割线
每一个分割线都是一个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标签 , 而是使用超链接标签, 并取消按钮样式 !
案例:
<ul class="nav nav-tabs">
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">亚洲图片</a></li>
<li><a href="javascript:void(0)">欧美图片</a></li>
<li class="dropdown">
<a data-toggle="dropdown" href="#">日韩 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">小泽马老师系列</a></li>
<li><a href="#">武藤马老师系列</a></li>
<li><a href="#">天海马老师系列</a></li>
<li><a href="#">加藤马老师系列</a></li>
<li><a href="#">波多马老师系列</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">国产高清</a></li>
<li><a href="javascript:void(0)">各种avi</a></li>
<li><a href="javascript:void(0)">各种rmvb</a></li>
<li><a href="javascript:void(0)">各种vr资源</a></li>
</ul>
内容切换导航
步骤:
- 创建一个普通的导航
- 在导航ul的下面 ,添加一个兄弟元素div , 指定div的class=“tab-content”
- 在上述创建的div中 , 加入一个个的子div , 每一个子div 作为一个被切换的内容
- 这个div必须有id , class值必须设置为tab-pane fade , 默认选中项的class值为: tab-pane fade in active
- 导航中每一个超链接 , 添加属性: data-toggle=“tab”
- 导航中每一个超链接 ,都需要添加链接地址 , 链接地址为#第二步子div的id
- 给导航中默认选中的li选项 ,设置class=active
案例:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#t1">首页</a></li>
<li><a data-toggle="tab" href="#t2">亚洲</a></li>
<li><a data-toggle="tab" href="#t3">欧美</a></li>
<li><a data-toggle="tab" href="#t4">日韩</a></li>
<li><a data-toggle="tab" href="#t5">国产</a></li>
<li><a data-toggle="tab" href="#t6">更多</a></li>
</ul>
<div class="tab-content">
<div id="t1" class="tab-pane fade in active">
<div class="jumbotron" style="padding-left:50px">
<h1>我们这里是一个正经的网站</h1>
<p>
志向是天才的幼苗，经过热爱劳动的双手培育，在肥田沃土里将成长为粗壮的大树。不热爱劳动，不进行自我教育，志向这棵幼苗也会连根枯死。确定个人志向，选好专业，这是幸福的源泉。 —— 苏霍姆林斯基
</p>
</div>
</div>
<div id="t2" class="tab-pane fade"><h3>亚洲</h3><img src="images/22.jpg"></div>
<div id="t3" class="tab-pane fade"><h3>欧美</h3><img src="images/23.jpg"></div>
<div id="t4" class="tab-pane fade"><h3>日韩</h3><img src="images/24.jpg"></div>
<div id="t5" class="tab-pane fade"><h3>国产</h3><img src="images/25.jpg"></div>
<div id="t6" class="tab-pane fade"><h3>更多</h3>更多内容, 请<a href="http://shuidianshuisb.com">开启svip</a></div>
</div>
附加导航
步骤:
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”
172万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
