Tip: Record the modification of the bootstrap navigation bar style (color, height)
Article Directory
foreword
I want to use bootstrap when writing adaptive web pages, but there are some differences from the original, so we need to modify it slightly, such as the style of the navigation bar
提示：本文仅供参考，代码如下：
1. Modification of bootstrap navigation bar style (color, height)
.navbar {
border-radius: unset; // 去除默认的导航栏弧度
border: unset; // 去除默认的导航栏边框
margin-bottom: 0; // 去除默认的导航栏外边距
}
// 修改导航栏背景颜色
.navbar-default {
background-color: #fff;
}
// 以下是修改logo的位置
.navbar-header{
line-height: 100px; // 此处是导航栏的高度
}
.navbar-header a{
display: flex;
height: 100px; // 此处是导航栏的高度
align-items: center;
}
// 以下是修改移动端按钮的位置
.navbar-toggle{
margin-top: 32px; // 此处是(导航栏的高度 - 移动端按钮的高度) / 2
margin-bottom: 32px; // 此处是(导航栏的高度 - 移动端按钮的高度) / 2
}
// 以下是修改导航按钮相关样式
.navbar-nav>li>a {
line-height: 66px; // 此处是导航栏的高度 - 34px; 不确定是减34px
font-size: 15px; // 按钮字体大小
font-weight: bold; // 按钮字体加粗
box-sizing: border-box; // 设置宽高包括边框
height: 100px; // 此处是导航栏的高度
border-top: 4px solid transparent; // 字体不点击和不悬浮时边框的颜色
}
.navbar-default .navbar-nav>li>a {
color: #292929; // 字体不点击、不悬浮时的颜色
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #e14f60; // 字体点击和悬浮时的颜色
border-top: 4px solid #e14f60; // 字体点击和悬浮时边框的颜色
}