Bootstrap进阶

冷不防 2022-05-19 08:56 114阅读 0赞

## 一、栅格布局 ##

### 0x1 栅格系统 ###

1、规则

*  <@div class=”container”> 调试内外边距 对齐方式…
 *  row 默认12列
 *  具体内容放在列元素之内，列元素能成为row元素的直接子元素*\*\**

2、布局基础

*  col-md-x 占据几列
 *  offset-x 偏移x个列 相当于 margin-left
 *  嵌套 row元素只能嵌套在 col中 把父row 划分成12列

*  列的顺序问题  
    
    
     *  col-md-push-7 元素从左向右移动7个栅格
     *  col-md-pull-7 元素从右向左移动7个栅格

3、响应式  
原理就是在class里面针对不同分辨率做不同的col- 布局  
Demo

<div id="header" style="height:60px;background:#000" class="row">
        <div id="heaText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">
            welcome
        </div>
        <div class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px;color:#fff">
            <div id="heaLeft" style="margin-top:16px;">
                <button id="left1" style="background:#000;border:0;" class="btn">
                    DOOLAR
                </button>
                <button id="left2" style="background:#000;border:0;">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
        <div class="pull-right col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px; color:#fff">
            <div id="heaRight" class="pull-right" style="margin-top:16px;">
                <button id="right1" style="background:#000;border:0;">
                    <span class="caret"></span>
                </button>
                <button id="right" style="background:#000;border:0;" class="btn">
                    DOOLAR
                </button>
            </div>
        </div>
    </div>

### 0x2 基础排版 ###

*  标题 h1-h6 36 30 24 18 14 12px
 *  内联列表 class=”list-inline” 列表水平排列
 *  表格 class = table  
    
    
     *  table-striped 隔行变色
     *  table-bordered 表格边框
     *  table-hover 鼠标悬停变色
 *  按钮 class = btn  
    
    
     *  btn-block 父元素宽度的100%
     *  active 激活状态
     *  disabled 禁用
 *  常用类  
    
    
     *  .pull-right/left 右左浮动
     *  .content-block 块元素
     *  clearfix:befor after 清除浮动

## 二、常用组件 ##

### 0x1 图标 ###

必须是内联元素，分为基本类、图标类  
需要内联元素span，使用时文字前面加空格

### 0x2 下拉菜单 ###

*  依赖于jQuery和bootstrap.js
 *  必须要有dropdown的容器将下拉菜单包裹
 *  下拉项必须要有class=”dropdown-toggle” data-toggle=”dropdown”
 *  下拉小三角 <@b class=”caret”>
 *  子菜单 <@ul class=”dropdown-menu”>
 *  分割线 <@li class=”divider”>

Demo

### 0x3 按钮组 ###

*  按钮组 btn-group
 *  两端圆角中间没有
 *  button和a标签的效果一样
 *  btn-group-justified 两端对齐

Demo

![20180723114651.png][]

### 0x4 按钮组 ###

*  和下拉菜单相似
 *  调整大小btn-lg/sm/xs

### 0x5 输入框 ###

*  span.nput-group-addon 可以添加输入框附加内容
 *  input.form-control 使之对齐

### 0x6 导航 ###

*  横向排列 nav nav-tabs
 *  胶囊导航 nav-pills
 *  导航全屏自适应 nav-justified
 *  添加下拉菜单 dropdown

<ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">home</a></li>
        <li><a href="#">分类</a></li>
        <li><a href="#">推荐</a></li>
    </ul>
    
    //添加下拉菜单的导航
    <ul class="nav nav-pills">
        <li class="active"><a href="#">home</a></li>
        <li><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>1</li>
                <li class="divider"></li>  //分割线
                <li>2</li>
            </ul>
        </li>
    </ul>

### 0x7 分页 ###

*  aria-label 标签字符串
 *  aria-hidden 屏幕识读设备 = true
 *  第一个最后一个有圆角

### 0x7 标签 ###

![20180724143629.png][]

<span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

### 0x8 徽章 ###

*  提示没有读取
 *  active 激活状态
 *  badge 多少未读取

<ul class="nav nav-pills" role="tablist"> //role屏幕阅读器残障者
      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>

### 0x9 进度条 ###

## 三、常用插件 ##

### 0x1 模态框 ###

通过data属性来调用，子窗体覆盖父窗体。

*  data-toggle=”modal” 用于打开modal窗口
 *  data-target=”\#idName” 打开的目标
 *  modal: 把div元素识别成模态框
 *  fade 当窗口切换，淡入淡出
 *  modal-dialog 对话框
 *  modal-content 内容
 *  modal-header 框内部的头
 *  close 关闭按钮的样式
 *  data-dismiss=”modal” 关闭窗口
 *  modal-body 窗口主要内容
 *  modal-footer 窗口底部区域

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    模态框
    </button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"> X </button>
                    <h4 class="modal-title" id="myModalLabel">
                        标题
                    </h4>
                </div>
                <div class="modal-body">
                    aaaaaaaaa
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    <button type="button" class="btn btn-primary">取消</button>
                </div>
            </div>
        </div>
    </div>
    //用jQuery调用模态框，不推荐
    $(function(){
        $("#myModal").modal("hide"); //调用模态窗口
    })

[20180723114651.png]: /images/20220519/82c10d121d1f4adbb8351882c02c81ed.png
[20180724143629.png]: /images/20220519/d096d54273f24a549d53e3e5b5aba0ce.png