Bootstrap 4 导航栏 |
您所在的位置:网站首页 › bootstrap滑动导航栏 › Bootstrap 4 导航栏 |
导航栏如此常见,以至于 Bootstrap 内建了导航栏组件 基本的导航栏Bootstrap 4 提供了 .navbar 、 .navbar-nav 、nav-item 、 .nav-link CSS 类用于创建一个导航栏 首页 Python PHP Perl运行范例 » 导航栏自适应可以在 .navbar 元素上添加 .navbar-expand-xl|lg|md|sm CSS 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠) 首页 Python PHP Perl运行范例 » 垂直导航栏在 .navbar 元素上删除 .navbar-expand-* 可以创建垂直导航栏 首页 Python PHP Perl运行范例 » 不同颜色导航栏导航栏可以设置不同的背景色 .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark .bg-light对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的 首页 Python PHP Perl ... ...运行范例 » 激活和禁用状态可以在 .nav-link 元素上添加 .active 高亮显示选中的选项 添加 .disabled 设置该链接是不可点击的 首页 Python PHP Perl运行范例 » 导航栏上的品牌 Logo可以添加 .navbar-brand CSS 类用于高亮显示品牌/Logo Logo 首页 Python PHP Perl运行范例 » 图片自适应导航栏如果使用图片,可以使用 .navbar-brand 设置图片自适应导航栏 运行范例 » 折叠导航栏通常,小屏幕上会折叠导航栏,用户通过点击来显示导航选项 要创建折叠导航栏,可以在按钮上添加 class="navbar-toggle" , data-toggle="collapse" 与 data-target="# thetarget" CSS 类 然后在设置了 class="collapse navbar-collapse" CSS 类的 div 上包裹导航内容(链接), div 元素上的 id 匹配按钮data-target的上指定的 id 导航栏 首页 Python PHP Perl运行范例 » 导航栏使用下拉菜单可以在导航栏上添加下拉菜单 Python Perl Java Servlet JSP Spring运行范例 » 导航栏的表单与按钮导航栏上可以添加表单,不过在 元素上添加 .form-inline 来排版输入框与按钮 搜索运行范例 » 导航栏文本可以使用 .navbar-text CSS 类设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样 首页 Python PHP Perl 导航栏非链接文本运行范例 » 固定导航栏在页面顶部在 .navbar 元素上添加 .fixed-top CSS 类用于设置导航栏固定在页面顶部 ...运行范例 » 固定导航栏在底部在 .navbar 元素上添加 .fixed-bottom CSS 类用于设置导航栏固定在页面底部 ...运行范例 » |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |