宁波网站建设 网络服务,会员制营销方案案例,wordpress查询次数,WordPress系统配置要求目录 01-最基本的导航示例02-设置导航的对齐方式02-1-设置导航在水平方向上的对齐方式 02-2-设置导航在垂直方向上进行布局03-设计标签页导航04-带下拉菜单的标签页导航05-设计胶囊式导航05-1-基本的胶囊式导航05-2-带下拉菜单的胶囊式导航 06-让导航菜单项可以切换(激活导航菜… 目录 01-最基本的导航示例02-设置导航的对齐方式02-1-设置导航在水平方向上的对齐方式 02-2-设置导航在垂直方向上进行布局03-设计标签页导航04-带下拉菜单的标签页导航05-设计胶囊式导航05-1-基本的胶囊式导航05-2-带下拉菜单的胶囊式导航 06-让导航菜单项可以切换(激活导航菜单项的交互行为)07-菜单项填充水平空间 01-最基本的导航示例
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title定义导航/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
nav classnava classnav-link active href#首页/aa classnav-link href#热门课程/aa classnav-link href#技术支持/aa classnav-link href#联系我们/a
/nav
/body
/html运行效果如下图所示
02-设置导航的对齐方式
02-1-设置导航在水平方向上的对齐方式
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title设置导航水平方向对齐/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer border
h3 aligncenter水平方向居中对齐/h3
ul classnav justify-content-centerli classnav-itema classnav-link active href#热门课程/a/lili classnav-itema classnav-link href#经典教材/a/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link href#联系我们/a/li
/ul
h3 aligncenter水平方向右对齐/h3
ul classnav justify-content-endli classnav-itema classnav-link active href#热门课程/a/lili classnav-itema classnav-link href#经典教材/a/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link href#联系我们/a/li
/ul
/body
/html运行效果如下
02-2-设置导航在垂直方向上进行布局
使用类flex-column可以设置导航的垂直布局。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title垂直对齐布局/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter垂直方向布局/h3
ul classnav flex-column borderli classnav-itema classnav-link active href#家用电器/a/lili classnav-itema classnav-link href#电脑办公/a/lili classnav-itema classnav-link href#家装厨具/a/lili classnav-itema classnav-link href#箱包钟表/a/lili classnav-itema classnav-link href#食品生鲜/a/lili classnav-itema classnav-link href#礼品鲜花/a/li
/ul
/body
/html运行效果如下
03-设计标签页导航
可以使用类nav-tabs实现标签页导航效果 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title标签页导航/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter标签页导航/h3
ul classnav nav-tabsli classnav-itema classnav-link active href#热门课程/a/lili classnav-itema classnav-link href#经典教材/a/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link disabled href#联系我们/a/li
/ul
/body
/html
运行效果如下 看到这里估计还是不明白什么是“标签页导航”的效果那我们去掉类 nav-tabs 就知道了去掉类nav-tabs 的效果如下
04-带下拉菜单的标签页导航
!DOCTYPE html
html
headmeta charsetUTF-8title带下拉菜单的标签页导航/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter带下拉菜单的标签页导航/h3
ul classnav nav-tabsli classnav-itema classnav-link active href#经典教材/a/lili classnav-item dropdowna classnav-link dropdown-toggle data-toggledropdown href#热门课程/adiv classdropdown-menua classdropdown-item active href#网络安全训练营/aa classdropdown-item href#Python智能开发训练营/aa classdropdown-item href#网站开发训练营/aa classdropdown-item href#Java开发训练营/a/div/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link disabled href#联系我们/a/li
/ul
/body
/html运行效果如下图所示
05-设计胶囊式导航
05-1-基本的胶囊式导航
可以用类nav-pills实现胶囊式导航的效果。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title胶囊式导航/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter胶囊式导航/h3
ul classnav nav-pillsli classnav-itema classnav-link active href#经典教材/a/lili classnav-itema classnav-link href#热门课程/a/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link href#联系我们/a/li
/ul
/body
/html运行效果如下 非胶囊式导航的效果如下
05-2-带下拉菜单的胶囊式导航
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title带下拉菜单的胶囊式导航/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter带下拉菜单的胶囊式导航/h3
ul classnav nav-pillsli classnav-itema classnav-link href#经典教材/a/lili classnav-item dropdowna classnav-link dropdown-toggle data-toggledropdown href#热门课程/adiv classdropdown-menua classdropdown-item active href#网络安全训练营/aa classdropdown-item href#Python智能开发训练营/aa classdropdown-item href#网站开发训练营/aa classdropdown-item href#Java开发训练营/a/div/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link href#联系我们/a/li
/ul
/body
/html运行效果如下
06-让导航菜单项可以切换(激活导航菜单项的交互行为)
上面的示例中的菜单项都不可以切换通过这一部分的学习使得菜单项可以切换即导航菜单项的交互行为)。 这里以“胶囊式导航”为例来说明这个问题。 ①为每个导航菜单项上的超链接定义 data-togglepill属性 或 data-toggletab属性“胶囊式导航”用data-togglepill属性 标签页导航用data-toggletab属性。 ②在导航结构基础上添加各导航菜单的内容结构。使用类tab-content定义内容显示结构。在内容包含结构中插入与导航结构对应的多个子内容框并使用类tab-pane定义每一个子内容框。同时为每个子内容框定义id值并在导航菜单项中为超链接绑定锚链接。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title胶囊导航选项切换/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcpopper.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter胶囊导航选项切换/h3
ul classnav nav-pillsli classnav-itema classnav-link active data-togglepill href#head经典教材/a/lili classnav-itema classnav-link data-togglepill href#new热门课程/a/lili classnav-itema classnav-link data-togglepill href#template技术支持/a/lili classnav-itema classnav-link data-togglepill href#about联系我们/a/li
/ul
div classtab-contentdiv classtab-pane active idhead这里包含网站开发编程开发和网络安全方面的经典教材/divdiv classtab-pane idnew这里包含网站开发编程开发和网络安全方面的视频课程/divdiv classtab-pane idtemplate读者遇到技术问题可以留言/divdiv classtab-pane idabout联系昊虹AI笔记/div/html/div
/body运行效果如下
07-菜单项填充水平空间
nav-fill类会将含有nav-item类的元素按照比例分配空间。注意nav-fill类是分配导航菜单所有的水平空间不是设置每个导航菜单项的宽度相同。 示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title填充/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter填充/h3
ul classnav nav-pills nav-fillli classnav-itema classnav-link active href#经典教材/a/lili classnav-itema classnav-link href#热门课程和热门专业/a/lili classnav-itema classnav-link href#技术支持/a/lili classnav-itema classnav-link href#联系我们/a/li
/ul
/body
/html运行效果如下
