bootstrap之navbar样式
2024-05-31 00:51:29
一、前言
现在开始介绍bootstrap的导航条(navbar)样式。
二、源码
1、navbar.less
1.1、navbar.less源码
//// Navbars// --------------------------------------------------// Wrapper and base class(基础导航条)//// Provide a static navbar from which we expand to create full-width, fixed, and// other navbar variations..navbar {position: relative;min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)margin-bottom: @navbar-margin-bottom;border: 1px solid transparent;// Prevent floats from breaking the navbar&:extend(.clearfix all);@media (min-width: @grid-float-breakpoint) {border-radius: @navbar-border-radius;}}// Navbar heading(导航条头部)//// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy// styling of responsive aspects..navbar-header {&:extend(.clearfix all);@media (min-width: @grid-float-breakpoint) {float: left;}}// Navbar collapse(导航条折叠)//// Group your navbar content into this for easy collapsing and expanding across// various device sizes. By default, this content is collapsed when <768px, but// will expand past that for a horizontal display.//// To start (on mobile devices) the navbar links, forms, and buttons are stacked// vertically and include a `max-height` to overflow in case you have too much// content for the user's viewport..navbar-collapse {overflow-x: visible;padding-right: @navbar-padding-horizontal;padding-left: @navbar-padding-horizontal;border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255,255,255,.1);&:extend(.clearfix all);-webkit-overflow-scrolling: touch;&.in {overflow-y: auto;}@media (min-width: @grid-float-breakpoint) {width: auto;border-top: 0;box-shadow: none;&.collapse {display: block !important;height: auto !important;padding-bottom: 0; // Override default settingoverflow: visible !important;}&.in {overflow-y: visible;}// Undo the collapse side padding for navbars with containers to ensure// alignment of right-aligned contents..navbar-fixed-top &,.navbar-static-top &,.navbar-fixed-bottom & {padding-left: 0;padding-right: 0;}}}.navbar-fixed-top,.navbar-fixed-bottom {.navbar-collapse {max-height: @navbar-collapse-max-height;@media (max-device-width: @screen-xs-min) and (orientation: landscape) {max-height: 200px;}}}// Both navbar header and collapse//// When a container is present, change the behavior of the header and collapse..container,.container-fluid {> .navbar-header,> .navbar-collapse {margin-right: -@navbar-padding-horizontal;margin-left: -@navbar-padding-horizontal;@media (min-width: @grid-float-breakpoint) {margin-right: 0;margin-left: 0;}}}//// Navbar alignment options//// Display the navbar across the entirety of the page or fixed it to the top or// bottom of the page.// Static top (unfixed, but 100% wide) navbar.navbar-static-top {z-index: @zindex-navbar;border-width: 0 0 1px;@media (min-width: @grid-float-breakpoint) {border-radius: 0;}}// Fix the top/bottom navbars when screen real estate supports it(固定导航条).navbar-fixed-top,.navbar-fixed-bottom {position: fixed;right: 0;left: 0;z-index: @zindex-navbar-fixed;// Undo the rounded corners@media (min-width: @grid-float-breakpoint) {border-radius: 0;}}.navbar-fixed-top {top: 0;border-width: 0 0 1px;}.navbar-fixed-bottom {bottom: 0;margin-bottom: 0; // override .navbar defaultsborder-width: 1px 0 0;}// Brand/project name(导航条标题).navbar-brand {float: left;padding: @navbar-padding-vertical @navbar-padding-horizontal;font-size: @font-size-large;line-height: @line-height-computed;height: @navbar-height;&:hover,&:focus {text-decoration: none;}> img {display: block;}@media (min-width: @grid-float-breakpoint) {.navbar > .container &,.navbar > .container-fluid & {margin-left: -@navbar-padding-horizontal;}}}// Navbar toggle(响应式导航条触发)//// Custom button for toggling the `.navbar-collapse`, powered by the collapse// JavaScript plugin..navbar-toggle {position: relative;float: right;margin-right: @navbar-padding-horizontal;padding: 9px 10px;.navbar-vertical-align(34px);background-color: transparent;background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214border: 1px solid transparent;border-radius: @border-radius-base;// We remove the `outline` here, but later compensate by attaching `:hover`// styles to `:focus`.&:focus {outline: 0;}// Bars(响应式导航触发图标的bar).icon-bar {display: block;width: 22px;height: 2px;border-radius: 1px;}.icon-bar + .icon-bar {margin-top: 4px;}@media (min-width: @grid-float-breakpoint) {display: none;}}// Navbar nav links(导航条)//// Builds on top of the `.nav` components with its own modifier class to make// the nav the full height of the horizontal nav (above 768px)..navbar-nav {margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;> li > a {padding-top: 10px;padding-bottom: 10px;line-height: @line-height-computed;}@media (max-width: @grid-float-breakpoint-max) {// Dropdowns get custom display when collapsed.open .dropdown-menu {position: static;float: none;width: auto;margin-top: 0;background-color: transparent;border: 0;box-shadow: none;> li > a,.dropdown-header {padding: 5px 15px 5px 25px;}> li > a {line-height: @line-height-computed;&:hover,&:focus {background-image: none;}}}}// 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;}}}}// Navbar form(带表单的导航条)//// Extension of the `.form-inline` with some extra flavor for optimum display in// our navbars..navbar-form {margin-left: -@navbar-padding-horizontal;margin-right: -@navbar-padding-horizontal;padding: 10px @navbar-padding-horizontal;border-top: 1px solid transparent;border-bottom: 1px solid transparent;@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);.box-shadow(@shadow);// Mixin behavior for optimum display.form-inline();.form-group {@media (max-width: @grid-float-breakpoint-max) {margin-bottom: 5px;&:last-child {margin-bottom: 0;}}}// Vertically center in expanded, horizontal navbar.navbar-vertical-align(@input-height-base);// Undo 100% width for pull classes@media (min-width: @grid-float-breakpoint) {width: auto;border: 0;margin-left: 0;margin-right: 0;padding-top: 0;padding-bottom: 0;.box-shadow(none);}}// Dropdown menus(下拉菜单)// Menu position and menu carets.navbar-nav > li > .dropdown-menu {margin-top: 0;.border-top-radius(0);}// Menu position and menu caret support for dropups via extra dropup class.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {margin-bottom: 0;.border-top-radius(@navbar-border-radius);.border-bottom-radius(0);}// Buttons in navbars(导航条按钮)//// Vertically center a button within a navbar (when *not* in a form)..navbar-btn {.navbar-vertical-align(@input-height-base);&.btn-sm {.navbar-vertical-align(@input-height-small);}&.btn-xs {.navbar-vertical-align(22);}}// Text in navbars(导航条文本)//// Add a class to make any element properly align itself vertically within the navbars..navbar-text {.navbar-vertical-align(@line-height-computed);@media (min-width: @grid-float-breakpoint) {float: left;margin-left: @navbar-padding-horizontal;margin-right: @navbar-padding-horizontal;}}// Component alignment(表单对齐方式)//// Repurpose the pull utilities as their own navbar utilities to avoid specificity// issues with parents and chaining. Only do this when the navbar is uncollapsed// though so that navbar contents properly stack and align in mobile.//// Declared after the navbar components to ensure more specificity on the margins.@media (min-width: @grid-float-breakpoint) {.navbar-left { .pull-left(); }.navbar-right {.pull-right();margin-right: -@navbar-padding-horizontal;~ .navbar-right {margin-right: 0;}}}// Alternate navbars// --------------------------------------------------// Default navbar(默认导航条样式).navbar-default {background-color: @navbar-default-bg;border-color: @navbar-default-border;.navbar-brand {color: @navbar-default-brand-color;&:hover,&:focus {color: @navbar-default-brand-hover-color;background-color: @navbar-default-brand-hover-bg;}}.navbar-text {color: @navbar-default-color;}.navbar-nav {> li > a {color: @navbar-default-link-color;&:hover,&:focus {color: @navbar-default-link-hover-color;background-color: @navbar-default-link-hover-bg;}}> .active > a {&,&:hover,&:focus {color: @navbar-default-link-active-color;background-color: @navbar-default-link-active-bg;}}> .disabled > a {&,&:hover,&:focus {color: @navbar-default-link-disabled-color;background-color: @navbar-default-link-disabled-bg;}}}.navbar-toggle {border-color: @navbar-default-toggle-border-color;&:hover,&:focus {background-color: @navbar-default-toggle-hover-bg;}.icon-bar {background-color: @navbar-default-toggle-icon-bar-bg;}}.navbar-collapse,.navbar-form {border-color: @navbar-default-border;}// Dropdown menu items(下拉菜单).navbar-nav {// Remove background color from open dropdown> .open > a {&,&:hover,&:focus {background-color: @navbar-default-link-active-bg;color: @navbar-default-link-active-color;}}@media (max-width: @grid-float-breakpoint-max) {// Dropdowns get custom display when collapsed.open .dropdown-menu {> li > a {color: @navbar-default-link-color;&:hover,&:focus {color: @navbar-default-link-hover-color;background-color: @navbar-default-link-hover-bg;}}> .active > a {&,&:hover,&:focus {color: @navbar-default-link-active-color;background-color: @navbar-default-link-active-bg;}}> .disabled > a {&,&:hover,&:focus {color: @navbar-default-link-disabled-color;background-color: @navbar-default-link-disabled-bg;}}}}}// Links in navbars(导航条链接)//// Add a class to ensure links outside the navbar nav are colored correctly..navbar-link {color: @navbar-default-link-color;&:hover {color: @navbar-default-link-hover-color;}}.btn-link {color: @navbar-default-link-color;&:hover,&:focus {color: @navbar-default-link-hover-color;}&[disabled],fieldset[disabled] & {&:hover,&:focus {color: @navbar-default-link-disabled-color;}}}}// Inverse navbar(反色导航条).navbar-inverse {background-color: @navbar-inverse-bg;border-color: @navbar-inverse-border;.navbar-brand {color: @navbar-inverse-brand-color;&:hover,&:focus {color: @navbar-inverse-brand-hover-color;background-color: @navbar-inverse-brand-hover-bg;}}.navbar-text {color: @navbar-inverse-color;}.navbar-nav {> li > a {color: @navbar-inverse-link-color;&:hover,&:focus {color: @navbar-inverse-link-hover-color;background-color: @navbar-inverse-link-hover-bg;}}> .active > a {&,&:hover,&:focus {color: @navbar-inverse-link-active-color;background-color: @navbar-inverse-link-active-bg;}}> .disabled > a {&,&:hover,&:focus {color: @navbar-inverse-link-disabled-color;background-color: @navbar-inverse-link-disabled-bg;}}}// Darken the responsive nav toggle.navbar-toggle {border-color: @navbar-inverse-toggle-border-color;&:hover,&:focus {background-color: @navbar-inverse-toggle-hover-bg;}.icon-bar {background-color: @navbar-inverse-toggle-icon-bar-bg;}}.navbar-collapse,.navbar-form {border-color: darken(@navbar-inverse-bg, 7%);}// Dropdowns.navbar-nav {> .open > a {&,&:hover,&:focus {background-color: @navbar-inverse-link-active-bg;color: @navbar-inverse-link-active-color;}}@media (max-width: @grid-float-breakpoint-max) {// Dropdowns get custom display.open .dropdown-menu {> .dropdown-header {border-color: @navbar-inverse-border;}.divider {background-color: @navbar-inverse-border;}> li > a {color: @navbar-inverse-link-color;&:hover,&:focus {color: @navbar-inverse-link-hover-color;background-color: @navbar-inverse-link-hover-bg;}}> .active > a {&,&:hover,&:focus {color: @navbar-inverse-link-active-color;background-color: @navbar-inverse-link-active-bg;}}> .disabled > a {&,&:hover,&:focus {color: @navbar-inverse-link-disabled-color;background-color: @navbar-inverse-link-disabled-bg;}}}}}.navbar-link {color: @navbar-inverse-link-color;&:hover {color: @navbar-inverse-link-hover-color;}}.btn-link {color: @navbar-inverse-link-color;&:hover,&:focus {color: @navbar-inverse-link-hover-color;}&[disabled],fieldset[disabled] & {&:hover,&:focus {color: @navbar-inverse-link-disabled-color;}}}}1.2、navbar.less应用
<!--默认的导航栏--><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav><!--响应式的导航栏--><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">菜鸟教程</a></div><div class="collapse navbar-collapse" id="example-navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav><!--导航栏中的表单&按钮&文本&链接&对齐方式--><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</a></div><div><p class="navbar-text">Runoob 用户登录</p></div><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">提交</button><button type="button" class="btn btn-default navbar-btn">导航栏按钮</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></div></nav><!--固定到底部&反色导航栏--><nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav><!--静态的顶部(设置z-index为1000)--><nav class="navbar navbar-default navbar-static-top" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">菜鸟教程</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></div></nav>bootstrap之navbar样式相关推荐
- 修改bootstrap导航栏样式(颜色，高)
提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
- 三、Bootstrap之Navbar属性整理
Bootstrap之Navbar属性整理 参考资料 container Navbar属性 参考资料 row和col可以参考一下: https://blog.csdn.net/yzy85/article ...
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
- 带徽标的Bootstrap 3 Navbar
本文翻译自:Bootstrap 3 Navbar with Logo I want to use the Bootstrap 3 default navbar with an image logo i ...
- 去除bootstrap的table样式中单元格边框线
使用bootstrap的table样式,在非纯白背景下,会有单元格边框线,影响美观. 去除方式: <style type="text/css"> bod ...
- 引用Bootstrap无法显示样式，可能是安装的版本和参考的文档不相符
安装版本时没有指定版本号,默认安装最新版本4.0.0,但是使用时参考的是3.3.7版本的文档,导致不显示样式. 所以,如果使用bootstrap时出现样式问题,可以从引用文件是否正确这方面来考虑.
- bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色 设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
- Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
最新文章
- linux 常用命令：
- oracle grand select,Oracle SQL 高级篇
- SpringMVC异常报406 (Not Acceptable)的解决办法
- Xcode 中设置部分文件ARC支持
- python面向对象编程(封装与继承)
- SpringMVC拦截器之介绍和搭建环境
- HDU - 5820 Lights(主席树)
- 13-12-X-Pack的配置与检查
- 数据库查询性能优化之利器—索引（一）
- linux英特尔蓝牙驱动,IntelBluetoothFirmware 英特尔蓝牙驱动
- postman并发测试_PostMan接口压力测试
- QT(5.12)+Qgis(3.10) 点图层及线图层渲染
- Linux进程管理、防火墙
- cad考试题库绘图题答案_最新CAD考试题库及答案-cad考试题库绘图题答案
- Godaddy域名申请及设置
- 计算机类工程硕士研究生实践报告,工程硕士实践的总结报告.docx
- Android 实现一键反混淆功能
- 阿里云视频点播播放出错，控制台访问出现code:4400
- 语言模型 Probability Based: Language Model
- php时间格式及转换应用