无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

商城类微信小程序_Bootstrap根本组件学习笔记之导航(10)

时间:2021-01-12 16:40来源:商城类微信小程序 作者:jianzhan 点击:
Bootstrap基本部件学习培训手记之导航栏(10) 本文关键为大伙儿详尽详细介绍了Bootstrap基本部件学习培训手记之导航栏,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下
Bootstrap基本组件学习笔记之导航(10)       这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap的导航很有特色,主要分为胶囊式导航、面包屑导航、头部导航共3大类,可以满足绝大部分需求。

0x01 胶囊式导航

胶囊式导航采用的是无序列表ul来实现:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 胶囊式导航 /title 
 /head 
 body 
 div 
 div 
 h1 胶囊式导航 /h1 
 /div 
 div 
 h3 水平样式 /h3 
 li a href="#" 首页 /a /li 
 li a href="#" 新闻 /a /li 
 li a href="#" 关于 /a /li 
 /ul 
 /div 
 div 
 h3 垂直样式 /h3 
 li a href="#" 首页 /a /li 
 li a href="#" 新闻 /a /li 
 li a href="#" 关于 /a /li 
 /ul 
 /div 
 /div 
 /body 
 /html 

效果如下:

0x02面包屑导航

面包屑导航采用的是有序列表ol来实现:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 面包屑导航 /title 
 /head 
 body 
 div 
 div 
 h1 面包屑导航 /h1 
 /div 
 div 
 li a href="#" 学校 /a /li 
 li a href="#" 一年级 /a /li 
 li a href="#" 一班 /a /li 
 /div 
 /div 
 /body 
 /html 

效果如下:

0x03 头部导航

头部导航在网站开发中比较常见,依赖于Bootstrap库的colla凡科抠图e插件。基本样式如下:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 style 
 /*body{*/
 /*padding-top: 50px;*/
 /*}*/
 /style 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 头部导航 /title 
 /head 
 body 
 div 
 nav 
 div 
 button type="button" data-toggle="colla凡科抠图e" data-target="#navbar" 
 span Toggle navigation /span 
 span /span 
 span /span 
 span /span 
 /button 
 a href="#" 网站标题 /a 
 /div 
 div id="navbar" 
 li a href="#" 首 页 /a /li 
 li a href="#" 新闻 /a /li 
 a href="#" data-toggle="dropdown" 
 下拉菜单
 span /span 
 li a href="#" 菜单1 /a /li 
 li a href="#" 菜单2 /a /li 
 li a href="#" 菜单3 /a /li 
 /ul 
 /li 
 /ul 
 form 
 div 
 input type="text" placeholder="用户名" 
 /div 
 div 
 input type="password" placeholder="密码" 
 /div 
 div 
 button type="submit" 提 交 /button 
 /div 
 /form 
 /div 
 /nav 
 div 
 h1 头部导航 /h1 
 /div 
 div 
 p 内容 /p 
 /div 
 /div 
 /body 
 /html 

效果如下:

当屏幕宽度很窄时,会出现下面样式:

这是因为我们在实现过程中使用了如下代码:

 span Toggle navigation /span 
 span /span 
 span /span 
 span /span 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866