04_Bootstrap插件01

Myth丶恋晨 2023-10-16 12:21 7阅读 0赞

### 1 下拉菜单 ###

Bootstrap 中的下拉菜单依赖于 `.dropdown` 类，或者添加了 `position: relative;` 的元素。

<div class="dropdown">
        <div class="btn btn-default" data-toggle="dropdown">个人中心 <span class="caret"></span></div>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>
    
    <div style="position: relative;">
        <div class="btn btn-default" data-toggle="dropdown">个人中心 <span class="caret"></span></div>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>

如果想要让菜单弹出的方向向上，可以为下拉菜单的父元素设置 `.dropup` 类（默认是向下弹出的）。

*  下拉菜单右对齐，使用 `.dropdown-menu-right` 类
 *  下拉菜单左对齐，使用 `.dropdown-menu-left` 类

<div class="dropup">
        <div class="btn btn-default" data-toggle="dropdown">个人中心 <span class="caret"></span></div>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>

在下拉菜单中可通过添加一些类名来使用特殊的样式：

*  `.dropdown-header` 标明一组动作
 *  `.divider` 添加一条分割线
 *  `.disabled` 禁用相应的菜单项

#### 1.1 按钮式下拉菜单 ####

把按钮放入 `.btn-group` 中，然后加入适当的菜单列表，就可以让按钮作为菜单的触发器了。

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            个人中心 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>

#### 1.2 分裂式按钮下拉菜单 ####

<div class="btn-group">
        <button type="button" class="btn btn-default">
            个人中心
        </button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>
    
    
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default">
            个人中心
        </button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">更改头像</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="#">前往个人中心</a></li>
            <li class="divider"></li>
            <li><a href="#">注销</a></li>
        </ul>
    </div>

### 2 输入框组 ###

通过 `.input-group` 加上 `.input-group-addon` 或 `.input-group-btn` 类，可以给 `.form-control` 的前面或后面添加额外的元素。

<div class="input-group">
        <span class="input-group-addon">价格</span>
        <input type="text" class="form-control" name="goodsprice" />
        <span class="input-group-addon">元</span>
    </div>
    
    <div class="input-group">
        <span class="input-group-addon">
            <input type="checkbox" name="usersex">
        </span>
        <input type="text" class="form-control" name="usersex" />
    </div>
    
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" name="usersex">
        </span>
        <input type="text" class="form-control" name="usersex" />
    </div>
    
    <div class="input-group">
        <input type="text" class="form-control" name="usersex" />
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">发送验证码</button>
        </span>
    </div>
    
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                选择城市 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">郑州</a></li>
                <li><a href="#">商丘</a></li>
                <li><a href="#">信阳</a></li>
            </ul>
        </span>
        <input type="text" class="form-control" name="usercity" />
    </div>
    
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-default">
                选择城市
            </button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">郑州</a></li>
                <li><a href="#">商丘</a></li>
                <li><a href="#">信阳</a></li>
            </ul>
        </span>
        <input type="text" class="form-control" name="usercity" />
    </div>

#### 2.1 尺寸大小 ####

为 `.input-group` 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。

### 3 导航 ###

tab 标签页

Bootstrap 中的导航依赖 `.nav` 类，以下类生效的前提是必须要有 `.nav` 类。

*  `.nav-tabs` 默认
 *  `.nav-pills` 胶囊式
 *  `.nav-stacked` 垂直排列
 *  `.nav-justified` 两端对齐

注意：`.nav-tabs` 类依赖 `.nav` 基类

<ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">更多</a></li>
    </ul>
    
    
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">更多</a></li>
    </ul>
    
    
    <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">更多</a></li>
    </ul>
    
    
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">更多</a></li>
    </ul>
    
    
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">更多</a></li>
    </ul>

#### 3.1 禁用导航链接 ####

添加 `.disabled` 类，禁用当前链接，当前链接为灰色且没有鼠标悬停效果。

#### 3.2 带下拉菜单的标签页 ####

<ul class="nav nav-tabs">
        <li class="active"><a href="#">首页</a></li>
        <li class="disabled"><a href="#">新闻</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                个人中心 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">更改头像</a></li>
                <li><a href="#">修改密码</a></li>
                <li><a href="#">前往个人中心</a></li>
                <li class="divider"></li>
                <li><a href="#">注销</a></li>
            </ul>
        </li>
    </ul>
    
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首页</a></li>
        <li class="disabled"><a href="#">新闻</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                个人中心 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">更改头像</a></li>
                <li><a href="#">修改密码</a></li>
                <li><a href="#">前往个人中心</a></li>
                <li class="divider"></li>
                <li><a href="#">注销</a></li>
            </ul>
        </li>
    </ul>

### 4 导航条 ###

使用 `.navbar.navbar-default` 实现一个导航条，可包含一个 `.container` 或 `.container-fluid` 容器，从而让导航条居中，并在两侧添加内补（padding）。

#### 4.1 品牌图标 ####

使用 `.navbar-header` 与 `.navbar-brand` 实现导航条中，品牌 LOGO 部分。

#### 4.2 搜索表单 ####

将表单放置于 `.navbar-form` 之内可以呈现很好的垂直对齐，并在页面宽度较小时呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。

#### 4.3 导航按钮 ####

对于不包含在 `<form>` 中的 `<button>` 元素，加上 `.navbar-btn` 后，可以让它在导航条里垂直居中。

#### 4.4 导航文本 ####

在导航条中加入文本内容时，把文本包裹在 `.navbar-text`中，为了有正确的行距和颜色，通常使用 `<p>` 标签。

#### 4.5 非导航链接 ####

使用 `.navbar-link` 类可以设置除了导航之外的链接，让链接有正确的默认颜色和反色设置。

<nav class="navbar navbar-default">
        <div class="container-fluid">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>

#### 4.6 排列方式 ####

添加 `.navbar-left` 和 `.navbar-right` 类让导航链接、表单、按钮或文本对齐方式。

<nav class="navbar navbar-default">
        <div class="container-fluid">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text navbar-right">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>

#### 4.7 固定位置 ####

*  `.navbar-fixed-top` 类可以让导航条固定在顶部。
 *  `.navbar-fixed-bottom` 类可以让导航条固定在底部。
 *  `.navbar-static-top` 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。
 *  `.navbar-inverse` 类可以改变导航条的外观

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text navbar-right">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>
    
    
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text navbar-right">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>
    
    
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text navbar-right">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>
    
    
    <nav class="navbar navbar-default navbar-inverse">
        <div class="container">
            
            <div class="navbar-header">
                <a class="navbar-brand" href="#">LOGO</a>
            </div>
            
            <div class="navbar-collapse collapse">
                <p class="navbar-text navbar-right">请使用手机号码<a href="#" class="navbar-link">登录</a></p>
            </div>
        </div>
    </nav>

### 5 面包屑导航 ###

在一个带有层次的导航结构中标明当前页面的位置，通过 `.breadcrumb` 这个类实现。

各路径间的分隔符已经自动通过 CSS 的 `:before` 和 `content` 属性添加了。

### 6 分页 ###

使用 `.pagination` 实现带有展示页码的分页模块

#### 6.1 禁用和激活状态 ####

给不能点击的链接添加 `.disabled` 类、给当前页添加 `.active` 类。

#### 6.2 尺寸调整 ####

通过`.pagination-lg` 或 `.pagination-sm` 类修改分页的尺寸。

<ul class="pagination pagination-lg">
        <li class="disabled">
            <span>
                <span>«</span>
            </span>
        </li>
        <li class="active"><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#">
                <span>»</span>
            </a>
        </li>
    </ul>
    
    <ul class="pagination pagination-sm">
        <li class="disabled">
            <span>
                <span>«</span>
            </span>
        </li>
        <li class="active"><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#">
                <span>»</span>
            </a>
        </li>
    </ul>

#### 6.3 翻页类型 ####

使用 `.pager` 实现上一页和下一页的简单翻页。

分别添加 `.previous` 与 `.next` 类，把链接向两端对齐。

`.disabled` 类将翻页中的链接进行禁用