2025年Bootstrap中定制LESS-颜色及导航条

科技前沿 • 2025-01-06 16:52 • 阅读 35

大家好，我是讯享网，很高兴认识大家。

主题色

在variables.less文件的开始，可以看到灰色及品牌色的默认变量及其值

@gray-darker: lighten(#000,13.5%); //#222 @gray-dark

讯享网

我们可以直接进行替换，以涵盖我们所需的完整灰度空间

讯享网@gray-darker: #222; @gray-dark: #; @gray: #777; @gray-light: #aeaeae; @gray-lighter: #ccc @gray-lightest: #ededed @offwhite: #fafafa;

将品牌颜色改为金黄色：

@brand-primary: #c1ba62;

导航条颜色变量

在variables.less中修改下列值：

讯享网@navbar-height: 64px; @navbar-margin-bottom: 0; // 设置元素的下外边距 ... @navbar-default-color: @gray; @navbar-default-bg: #fff; @navbar-default-border: @gray-light; // darken(@navbar-default-bg, 9.5%); ... // Navbar links @navbar-default-link-color: @navbar-default-color; @navbar-default-link-hover-color: @link-hover-color;//悬停时 @navbar-default-link-hover-bg: @off-white; @navbar-default-link-active-color: @link-hover-color; @navbar-default-link-active-bg: @gray-lightest; @navbar-default-link-disabled-color: @gray-lighter; @navbar-default-link-disabled-bg: transparent;

会出现有关导航条的新特征

添加Logo

加入logo

<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120px"></a>

由于navbar-brand设定了内边距，使得Logo不在和导航条的底边对齐，通过修改navbar.less实现：

.navbar-brand { float: left; //padding: @navbar-padding-vertical @navbar-padding-horizontal; padding: 22px 30px 0 15px; }

实现对齐

调整导航项内边距

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html"><span class="icon fa fa-home"></span>Home</a></li> <li><a href="#"><span class="icon fa fa-desktop"></span>Portfolio</a></li> <li><a href="#"><span class="icon fa fa-group"></span>Team</a></li> <li><a href="#"><span class="icon fa fa-envelope"></span>Contact</a></li> </ul> </div>

代码中navbar-collapse指折叠类
更改导航文本项less样式，找到导航项的父元素ul的选择符.navbar-nav，然后找到// Uncollapse the nav非折叠导航项，更改代码如下

// Uncollapse the nav @media (min-width: @grid-float-breakpoint) { 
    float: left; margin: 0; > li { float: left; > a { //padding-top: @navbar-padding-vertical; //padding-bottom: @navbar-padding-vertical; padding: 30px 30px 14px; font-size: 18px; } }

解析：
这里的@grid-float-breakpoint指定了一个临界宽度，小于这个宽度会折叠。

2025年Bootstrap中定制LESS-颜色及导航条

主题色

导航条颜色变量

添加Logo

调整导航项内边距

相关推荐