请选择 进入手机版 | 继续访问电脑版

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

[模板制作] dedecms使用bootstrap自适应导航居中左对齐代码

[复制链接]
godkings 发表于 2019-11-16 23:13:56 | 显示全部楼层 |阅读模式
阿里云服务器2折起!

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
bootstrap4.3.1版本,dedecms导航代码,使用于所有屏幕,直接上代码,左对齐居中如下
  1. <nav class="navbar navbar-expand-lg navbar-dark bg-success">
  2.   <div class="container"> <a class="navbar-brand" href="{dede:global.cfg_cmsurl/}/">{dede:global.cfg_webname/}</a>
  3.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  4.     <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample07">
  5.       <ul class="navbar-nav mr-auto">
  6.         {dede:channel type='top' row='10' currentstyle="
  7.         <li class="nav-item active"> <a class="nav-link" href="~typelink~" ~rel~>~typename~<span class="sr-only">(current)</span></a> </li>
  8.         "}
  9.         <li class="nav-item"> <a class="nav-link" href="[field:typeurl/]" [field:rel/]>[field:typename/]</a> </li>
  10.         {/dede:channel}
  11.       </ul>
  12.     </div>
  13.   </div>
  14. </nav>
复制代码


导航内容全部居中代码:

  1. <nav class="navbar navbar-expand-lg navbar-dark bg-success">
  2.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
  3.     <span class="navbar-toggler-icon"></span>
  4.   </button>

  5.   <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
  6.     <ul class="navbar-nav">
  7.       <li class="nav-item active">
  8.         <a class="nav-link" href="{dede:global.cfg_cmsurl/}/">{dede:global.cfg_webname/}<span class="sr-only">(current)</span></a>
  9.       </li>
  10.                 {dede:channel type='top' row='10' currentstyle="
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="~typelink~" ~rel~>~typename~</a>
  13.       </li>
  14.                 "}
  15.                
  16.       <li class="nav-item">
  17.         <a class="nav-link" href="[field:typeurl/]" [field:rel/]>[field:typename/]</a>
  18.       </li>
  19.                 {/dede:channel}
  20.       
  21.     </ul>
  22.   </div>
  23. </nav>
复制代码


上面两行代码运行结果如分别下:
搜狗截图20191116231235.jpg
回复

使用道具 举报

QQ|Archiver|手机版|小黑屋|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2019-12-9 17:40 , Processed in 0.086804 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表