Bootstrap 导航栏
-
定义和使用
使用 Bootstrap,导航栏可以扩展或折叠,具体取决于屏幕尺寸。使用 .navbar 类创建一个标准导航栏,然后创建一个响应式折叠类:.navbar-expand-xl | lg | md | sm(将导航栏垂直堆叠在超大,大,中或小屏幕上)。要在导航栏中添加链接,请使用 <ul> 元素和 class="navbar-nav";然后添加具有 .nav-item 类的 <li>元素,然后添加具有 .nav-link 类的 <a> 元素:删除 .navbar-expand-xl | lg | md | sm 类以创建垂直导航栏:添加 .justify-content-center 类以使导航栏居中。以下示例将导航栏放在中,大和超大屏幕上;在小屏幕上,它将垂直显示并左对齐(由于.navbar-expand-sm类): -
彩色导航栏
使用 .bg-color 类来更改导航栏的背景颜色(.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg -dark和.bg-light)提示:使用 .navbar-dark 类向导航栏中的所有链接添加白色文本颜色,或使用 .navbar-light 类添加黑色文本颜色。激活/禁用状态:将 .active 类添加到 <a> 元素中以突出显示当前链接,或将 .disabled 类添加到指示链接不可单击。
使用 .navbar-text 类垂直对齐导航栏中的所有非链接元素(确保适当的填充和文本颜色)。 -
-
折叠导航栏
很多时候,尤其是在小屏幕上,您想隐藏导航链接,并用一个按钮替换,当单击该按钮时应显示它们。要创建可折叠的导航栏,请使用带有 class="navbar-toggler",data-toggle ="collapse" 和 data-target ="#thetarget" 的按钮。 然后将导航栏内容(链接等)包装在 div 元素中,并带有 class="collapse navbar-collapse",后跟与按钮的数据目标匹配的 ID:"thetarget"。提示:您还可以删除 .navbar-expand-md 类,以始终隐藏导航栏链接并显示切换按钮。
-
-
-
-