下拉菜单 了解
使用步骤:
1. 创建一个下拉菜单的容器(div), 指定class=dropdown|dropup
2. 在容器中, 添加两个子元素
- 第一个子元素编写为按钮样式, 用于做下拉的 按钮
- 第二个子元素使用列表标签,做下拉以后的 列表
3. 修改下拉按钮
- 给按钮样式的元素, 添加属性: data-toggle=dropdown
- 给按钮样式的元素, 添加子元素span , 并指定新添加的span的class=caret(添加箭头效果)
4. 修改下拉列表
- 添加class=dropdown-menu ,
- 在下拉列表中,加入下拉菜单项(li), li标签中包含的文本必须是超链接
案例:
<div class="dropdown">
<span data-toggle="dropdown" class="btn btn-success">选择下载<span class="caret"></span></span>
<ul class="dropdown-menu">
<li><a href="#">高清无码中文字幕avi</a></li>
<li><a href="#">超清蓝光3D无码RMVB</a></li>
<li><a href="#">高清360°VR资源</a></li>
<li><a href="#">独家特播奇男岛国历险记</a></li>
</ul>
</div>
下拉菜单 样式调整 了解
设置向下触发
外层div class="dropdown"
设置向上触发
外层div class="dropup"
设置菜单项居右(默认居左)
在ul标签中 , 指定class="dropdown-menu-right"
设置第一个li为菜单标题:
给这个li添加,添加非超链接的文本内容,并指定class="dropdown-header"
设置选项之间的分割线
<li class="divider"></li>
设置菜单选项禁用
添加class="disabled"
设置菜单选项默认显示
给外层div 添加class="dropdown open"
分裂式 下拉菜单 了解
分裂式下拉菜单(按钮组合效果) 了解
步骤:
1. 先编写一个下拉菜单
2. 修改下拉菜单的外层div的class="btn-group"
3. 在div中前置一个新的按钮即可 !
案例:
<div class="btn-group">
<span class="btn btn-success">下载岛国资源</span>
<span data-toggle="dropdown" class="btn btn-success">更多<span class="caret"></span></span>
<ul class="dropdown-menu">
<li><a href="#">高清无码中文字幕avi</a></li>
<li><a href="#">超清蓝光3D无码RMVB</a></li>
<li><a href="#">高清360°VR资源</a></li>
<li><a href="#">独家特播奇男岛国历险记</a></li>
</ul>
</div>
分裂式下拉菜单(输入框组合效果) 了解
步骤:
1. 编写一个普通的下拉菜单
2. 修改下拉菜单的外层div class="input-group-btn"
3. 给下拉菜单添加一个父元素div , 并指定class="input-group"
4. 向第三步创建的div中, 前置一个输入框
案例:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<span data-toggle="dropdown" class="btn btn-success">选择下载<span class="caret"></span></span>
<ul class="dropdown-menu">
<li><a href="#">高清无码中文字幕avi</a></li>
<li><a href="#">超清蓝光3D无码RMVB</a></li>
<li><a href="#">高清360°VR资源</a></li>
<li><a href="#">独家特播奇男岛国历险记</a></li>
</ul>
</div>
</div>
巨幕 了解
在巨幕组件中出现的文本元素, 都会被放大
class=jumbotron 即可实现
案例:
<div class="jumbotron">
<h1>这是被放大以后的h1</h1>
<p>这是放大以后的正常文本内容,哈呼啊哈哈哈哈哈</p>
</div>
-----
代码块:
<pre><h1>这是被放大以后的h1</h1>
<p>这是放大以后的正常文本内容,哈呼啊哈哈哈哈哈</p></pre>
<div class="well"><h1>这是被放大以后的h1</h1>
<p>这是放大以后的正常文本内容,哈呼啊哈哈哈哈哈</p></div>
导航 *
基本导航
步骤:
1. 编写一个ul标签 , 指定class="nav"
2. li的内容, 应被超链接包含
案例:
<ul class="nav">
<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>
<li><a href="#">百科</a></li>
<li><a href="#">更多</a></li>
</ul>
横向导航
步骤:
修改基本导航的class="nav nav-tabs"
案例:
<ul class="nav nav-tabs">
<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>
<li><a href="#">百科</a></li>
<li><a href="#">更多</a></li>
</ul>
横向 撑满父容器的导航
步骤:
修改横向导航class="nav nav-tabs nav-justified"
(响应式效果: 当屏幕宽度小于992px, 更改为垂直导航)
案例:
<ul class="nav nav-tabs nav-justified">
<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>
<li><a href="#">百科</a></li>
<li><a href="#">更多</a></li>
</ul>
胶囊导航 了解
修改基本导航class="nav nav-pills"
- 横向胶囊
<ul class="nav nav-pills">
<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>
<li><a href="#">百科</a></li>
<li><a href="#">更多</a></li>
</ul>
- 垂直胶囊
胶囊导航 默认为横向效果 , 添加class=nav-stacked指定垂直胶囊
<ul class="nav nav-pills nav-stacked">
<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>
<li><a href="#">百科</a></li>
<li><a href="#">更多</a></li>
</ul>
导航中 添加下拉菜单
回顾我们编写下拉菜单的步骤:
存在一个特点: 无论是哪一种下拉菜单, 父元素都是一个块元素 div
回顾我们编写导航的步骤:
导航中, 每一个导航项,都是被li包含的超链接 , li也是块元素
在导航中加入下拉菜单, 步骤特别简单:
把导航中的li 当作下拉菜单的父元素div即可 !
建议 将导航中的按钮样式, 修改为普通超链接:
<a href='#' data-toggle="dropdown">更多</a>
案例:
<ul class="nav nav-tabs">
<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>
<li><a href="#">百科</a></li>
<li class="dropdown">
<a href='#' data-toggle="dropdown">更多</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>
</ul>
</li>
</ul>
内容切换导航
步骤:
1. 创建一个导航
2. 在导航的外部编写一个div,class指定为: tab-content ,用于编写被切换的内容
3. 在上述的div中, 加入一个个的内容div , 每一个子div表示一个等待被切换的内容选项卡
- 内容选项卡 div 必须存在id属性
- class="tab-pane fade"
- 默认显示的内容选项卡的class="tab-pane fade in active"
4. 修改导航中的每一个超链接 , 连接地址为 #内容选项卡id (锚点操作)
5. 向每一个导航中的超链接 添加属性: data-toggle="tab"
6. 给默认选择的导航项的li 添加class=active
案例:
<ul class="nav nav-tabs">
<li class="active"><a href="#content1" data-toggle="tab">首页</a></li>
<li><a href="#content2" data-toggle="tab">资讯</a></li>
<li><a href="#content3" data-toggle="tab">视频</a></li>
<li><a href="#content4" data-toggle="tab">图片</a></li>
<li><a href="#content5" data-toggle="tab">地图</a></li>
<li><a href="#content6" data-toggle="tab">百科</a></li>
<li><a href="#content7" data-toggle="tab">更多</a></li>
</ul>
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
...
</div>
<div id="content2" class="tab-pane fade">...</div>
<div id="content3" class="tab-pane fade">...</div>
<div id="content4" class="tab-pane fade">...</div>
<div id="content5" class="tab-pane fade">...</div>
<div id="content6" class="tab-pane fade">...</div>
<div id="content7" class="tab-pane fade">...</div>
</div>
附加导航
步骤:
1. 通过栅格系统, 实现左右两个块的分割 3:9
- 左侧为导航div 添加id属性
- 右侧为内容div
- 比例3:9
2. 编写左侧导航div
- 在左侧div中, 添加普通垂直导航即可
- 给导航的ul添加属性:data-spy="affix"
3. 编写右侧内容div
- 在内容与导航关联的开始位置, 添加锚点
4. 修改左侧导航div中每一个超链接地址为 #锚点名称
5. 将导航绑定到网页中
- 修改body , 添加如下属性:
data-spy=scroll;
data-target="#导航div的id"
- 给导航首选项添加class="active"
案例:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2" id="menuxxx">
<ul class="nav nav-pills nav-stacked" data-spy="affix" style="margin-top: 100px">
<li><a href="#c1" class="active">第一部分</a></li>
<li><a href="#c2">第二部分</a></li>
<li><a href="#c3">第三部分</a></li>
<li><a href="#c4">第四部分</a></li>
</ul>
</div>
<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9">
<h2 id="c1">第一部分</h2>
<p>此处省略一万字...</p>
<h2 id="c2">第二部分</h2>
<p>此处省略一万字...</p>
<h2 id="c3">第三部分</h2>
<p>此处省略一万字...</p>
<h2 id="c4">第四部分</h2>
<p>此处省略一万字...</p>
</div>
</div>
</div>
导航条
一般用于设置网页的顶部 与 底部导航菜单 !
使用步骤:
1. 编写一个nav标签 , 指定class="navbar navbar-default"
2. 向nav标签中添加导航标题标签div , 指定class为navbar-header
3. 向导航标题div中, 加入标题内容span标签 class="navbar-brand"
4. 向nav标签中, 加入基本导航 , 并修改基本导航ul元素的class为="nav navbar-nav"
案例:
<nav class="navbar navbar-default">
<div class="navbar-header">
<span class="navbar-brand">奇男资源分享站</span>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
</ul>
</nav>
向导航条中添加内容:
1. 添加标题
<div class="navbar-header">
<span class="navbar-brand">奇男资源分享站</span>
</div>
2. 添加表单
给导航条中正常加入form标签, 将class设置为navbar-form即可
<form action="https://www.baidu.com/s" class="navbar-form navbar-right">
<div class="input-group"><input name="wd" placeholder="请输入搜索的内容" class="form-control"><span class="input-group-addon glyphicon glyphicon-search" onclick="$(this).parent().parent().submit()"></span></div>
</form>
3. 控制导航条中每一个元素的位置
class="navbar-left"
或
class="navbar-right"
4. 在导航条中出现的普通文本 会与导航条中内容的水平位置不一致 , 通过添加class="navbar-text"即可实现水平对齐
注意:
因为导航条在显示子元素时, 总是特别靠边,
我们建议 在编写导航条时, 将所有的导航条中的内容, 放到一个固定宽度的栅格系统中
案例:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">奇男资源分享站</span>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
</ul>
<span class="navbar-text">哈哈哈</span>
<form action="https://www.baidu.com/s" class="navbar-form navbar-right">
<div class="input-group"><input name="wd" placeholder="请输入搜索的内容" class="form-control">
<span class="input-group-addon glyphicon glyphicon-search" onclick="$(this).parent().parent().submit()"></span></div>
</form>
</div>
</nav>
导航条固定位置修改
- 固定位置样式
与固定定位很像, 定位在网页的顶部, 或 底部, 不跟随网页的滑动而滑动 !
nav标签 添加class="navbar-fixed-top" 或 class="navbar-fixed-bottom"
- 静态导航样式
去掉圆角, 与网页等宽
nav标签 添加class="navbar-static-top"
分页标签
多页分页标签
通过ul标签来编写多页分页效果:
步骤:
1. 编写一个ul标签, 指定class="pagination"
2. 在ul标签中加入一个个的li , li中包含的是每一个翻页按钮 (翻页按钮为普通超链接)
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">...</a></li>
<li><a href="#">下一页</a></li>
</ul>
上下翻页标签
步骤:
1. 编写一个ul标签, 指定class="pager"
2. 添加两个li标签,
- li中包含超链接 ,一个内容为上一页, 一个内容为下一页
- 给左侧li 添加class="previous" 可以实现居左显示
- 给右侧li 添加class="next" 可以实现居右显示
案例:
<ul class="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
空格
< <
> >
& &
¥ ￥
© ©
® ®
警告框
我们可以在网页中 添加警告框, 带有关闭按钮, 关闭后, 不再占用网页空间 !
编写步骤:
1. 编写一个div , 指定class="alert alert-success"
2. 在div中 , 加入弹出的文本内容
3. div中追加button按钮. class指定为close , data-dismiss="alert" (关闭按钮)
案例:
<div class="alert alert-success">
恭喜你 ,现在我们正在搞活动, 洗一次脚送一次奇男头部按摩 , 中国仅有的十大奇男子之一, 你值得拥有 !
<button class="close" data-dismiss="alert"></button>
</div>
栅格缩略图
我们在使用栅格系统控制图片时, 图片并不会等比例缩放!
我们需要给栅格系统中的图片增加div.thumbnail , 来实现图片缩略响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="" alt="">
</div>
</div>
</div>
</div>
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
