Bootstrap进阶

最新推荐文章于 2024-07-24 16:38:25 发布

徐念安

最新推荐文章于 2024-07-24 16:38:25 发布

阅读量369

点赞数 1

分类专栏：前端开发文章标签： bootstrap 进阶栅格系统组件化

本文链接：https://blog.csdn.net/geekmubai/article/details/81171441

版权

前端开发专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一、栅格布局

0x1 栅格系统

1、规则

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

2、布局基础

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

<div class="row">
    <div class="col-sm-9">
        1
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-8">2</div>
        </div>
    </div>
</div>

列的顺序问题
- 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，使用时文字前面加空格

<span class="glyphicon glyphicon-user"></span> User
//输入框
<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-pencil"></span>
  </span>
  <input type="text" class="col col-lg-2 form-control">
</div>

0x2 下拉菜单

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

Demo

<ul class="nav navbar-nav">
    <li><a href="#">菜单一</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            菜单二<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>子菜单一</li>
            <li class="divider"></li>
            <li>子菜单二</li>
        </ul>
    </li>
    <li><a href="#">菜单三</a></li>
</ul>

0x3 按钮组

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

Demo

<div class="btn-group">
  <button type="button" class="btn btn-default">首页</button>
  <button type="button" class="btn btn-info">分类</button>
  <button type="button" class="btn btn-info">分类</button>
  <button type="button" class="btn btn-info">分类</button>
  <button type="button" class="btn btn-success">喜欢</button>
</div>
<div class="btn-group">
  <a class="btn btn-default">首页</a>
  <a class="btn btn-info">分类</a>
  <a class="btn btn-success">喜欢</a>
</div>
<br>
<br>
<!-- 按钮工具栏 
btn-group-lg/sm/xs
-->
<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn btn-default">首页</a>
    <a class="btn btn-info">分类</a>
    <a class="btn btn-success">喜欢</a>
  </div>
</div>
<br>
<br>
<div class="btn-group btn-group-justified">
  <a class="btn btn-default">首页</a>
  <a class="btn btn-info">分类</a>
  <a class="btn btn-success">喜欢</a>
</div>

0x4 按钮组

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

<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>少儿</li>
        <li>计算机</li>
        <li>社会</li>
    </ul>
</div>

0x5 输入框

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

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>

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
第一个最后一个有圆角

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

0x7 标签

<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 进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    60%
  </div>
</div>

三、常用插件

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"); //调用模态窗口
})