CSS笔记（Bootstrap布局组件）_bootstrap navbar初始化-CSDN博客

本文链接：https://blog.csdn.net/qq_38801354/article/details/77511376

1 下拉菜单

实现下拉菜单的步骤：

+ <div>或<li>等，定义`dropdown`
    + <a>或<button>等，定义`data-toggle="dropdown"`，`data-target="#id"`或`href="#id"`
    + <ul>，定义`dropdown-menu`
        + <li>，可定义`dropdown-header`用于创建标题,可定义`divider`创建分割线

小总结：

dropdown：指定下拉菜单，下拉菜单都包裹在dropdown里
dropup：指定上拉菜单
dropdown-menu：创建下拉菜单
dropdown-header：在下拉菜单中创建新标题
disabled：不能点击
divider：分割线

另外使用btn-group可以形成按钮分割的下拉菜单的效果，同样的其大小可以使用btn-lg，btn-sm，btn-xs

2 导航栏

制作一个导航栏的步骤：

向<nav>对象添加navbar类以及navbar-default类
若要添加标题则需要创建一个container-fluid类包裹navbar-header其内部包含一个navbar-brand的<a>或<p>元素
为导航栏添加链接，则需要添加nav以及navbar-nav的无序列表即可

2.1 响应式导航栏

实现导航栏的响应式，即浏览器的缩小，会导致样式变化，如生成小按钮，具体操作：

+ <nav>，定义`navbar`以及`navbar-default`
    + <div>，可定义`navbar-header`,作为导航栏标题，其中响应式的按钮也可以内嵌到此类中，如下
        + <a>或<button>，定义`data-toggle="collapse"`，`data-target="#id"`,注此定义响应式按钮默认右浮动
        + <a>或<p>等，定义`navbar-brand`，定义标题
    + <div>，定义`collapse`以及`navbar-collapse`，还有`id`
        + <ul>，定义`nav`以及`navbar-nav`

2.2 导航栏中的表单，按钮以及文本

添加表单：添加navbar-form类的<input>
添加按钮：添加不属于form的<button>时，button要添加navbar-btn
添加文本：向段落添加navbar-text，确保适当的前导和颜色

2.3 导航栏的位置

导航栏的对齐：navbar-left以及navbar-right
固定到顶部：在navbar父类中添加类名navbar-fixed-top（为了防止导航栏与页面主体中的其他内容的顶部相交错，请向标签添加至少 50 像素的内边距）
固定到底部：navbar-fixed-bottom
固定定位：navbar-static-top

2.4 小总结

navbar以及navbar-default：定义导航栏
container-fluid，navbar-header以及navbar-brand定义菜单标题
nav以及navbar：添加链接
navbar-toggle：在navbar-headeer内创建<div>，添加navbar-toggle用于定义响应式导航栏
data-toggle="collapse"：同样添加到navbar-toggle中，作为操控js
data-target="#id"：指向作用
collaspe以及navbar-collaspe：用于定义响应式的下拉菜单
navbar-form：用于导航栏添加输入框
navbar-text：用于导航栏添加文本
navbar-btn：用于导航栏添加按钮
navbar-left：左浮动
navbar-right：右浮动
navbar-fixed-top：定位顶部
navbar-fixed-bottom：定位底部
navbar-static-top：固定定位顶部

3 导航元素

导航元素常用于网页中的小布局，小板块中的菜单

3.1 标签式导航菜单

制作无序列表添加nav以及nav-tabs，使用nav-justified可以使导航菜单宽度与父类元素等宽，初始化选中的<li>添加active，同样的还有disabled

3.2 胶囊式导航菜单

制作无序列表添加nav以及nav-pills，使用nav-justified可以使导航菜单宽度与父类元素等宽，初始化选中的<li>添加active，同样的还有disabled，另外使用nav-stacked可以使胶囊菜单垂直摆放

注意：添加disabled类改变的只是样式，并不能改变功能

3.3 面包屑导航栏

创建无序列表添加breadcrumb

3.4 带下拉菜单的胶囊式标签页

向导航菜单栏中的<a>元素添加data-toggle="tab"或data-toggle="pill"并添加书签指向href="#id"，并设置初始化active
创建tab-content父类<div>，用于内嵌tab-pane的<div>，内嵌的<div>注意要设置上对应的id，同样内嵌tab-pane的<div>也可以设置active

3.5 小总结

nav及nav-tabs：定义标签化导航菜单
nav及nav-pills：定义胶囊化导航菜单
nav-stacked：胶囊化导航菜单垂直摆放
breadcrumb：面包屑导航
nav-jusetified：定义与父类等宽
data-toggle="tab"，data-toggle="pill"以及href：定义指向标签页
tab-content：包裹tab-pane定义标签页
tab-pane：定义每一项标签页

4 分页

pagination：创建无序列表添加pagination
pagination-lg
pagination-sm
active
disalbed
page：定义一个简单的无序列表
previous：左浮动
next：右浮动

5 标签

标签可用于计数、提示或页面上其他的标记显示，使用label类的<span>元素表示标签

label-default：灰
label-primary：蓝
label-success：绿
label-info：天蓝
label-warning：黄
label-danger：红
Badges：边角更加圆

6 超大屏幕与页面标题

jumbotron：创建一个带有jumbotron 的容器 <div>常用登录页面，可以增加标题的大小
page-header：文章标题放置在带有page-header的<div>中

7 缩略图

在图像周围添加带有thumbnail的 <a>标签，亦可以为<div>标签用于自定义缩略图已达到想电商网站中具体商品栏的效果，其中添加的内容用caption的<div>包裹起来，已达到外内距适中

8 警告

alert：固定类定义警告
alert-success：蓝
alert-info：天蓝
alert-warning：淡粉
alert-danger：紫
alert-link：警告添加链接，将alert-link添加到<a>标签上

8.1 可取消警告

通过创建一个<div>，并向其添加一个 alert和四个上下文类之一，同时添加alert-dismissable
添加关闭按钮：添加data-dimissed="alert"

9 进度条

创建progress类的<div>，同时添加progress-striped类能形成斜斑马线样式，添加active类可以有动态效果
在progress类中创建内嵌的progress-bar类的<div>，并添加style="*%"的属性，用以表示进度，同时添加progress-bar-*，* 可以是 success、info、warning、danger。（添加多个progress-bar可以实现堆叠进度条的效果）

10 多媒体对象

多媒体对象是一个抽象对象，透过它可以实现如同微博评论的组件

创建父类media的<div>或者media-list的无序列表，该类允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边
创建内嵌的media-body用于包裹主题内容
创建media-left或media-right，它们相应的应放置在media-body的左右两侧

11 面板

创建并添加panel类以及panel-default（还可以为panel-primary、panel-success、panel-info、panel-warning、panel-danger）类的<div>
创建内嵌的panel-heading类以及panel-title用于定义标题
创建内嵌的panel-body定义面板内容
创建内嵌的panel-footer定义脚注