zoukankan      html  css  js  c++  java
  • Bootstrap笔记-加强版

    1、bootstrap引入:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    </head>
    <body>
    <h1>你好,世界!</h1>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    </body>
    </html>



    2、bootstrap栅格系统:

    分12列 row col

    阈值:1200>= 992>= 768>= 768<

    容器:
    流体(百分比):container-fluid
    固定(px):container 响应式:1170 970 750 auto

    由大到小:
    col-lg-(1-12):大于1200px
    col-md- (1-12):992-1200px
    col-sm- : 768-992px
    col-xs- : 小于768

    列偏移:

    col-lg-offset-(1-12):向右偏移几个网格
    col-md-offset-
    col-sm-offset-
    col-xs-offset-

    行排序:

    col-lg-push-(1-12):向右偏移几个网格 
    col-lg-pull-(1-12):向左偏移几个网格

    浮动:

    左浮动:pull-left
    右浮动:pull-right

    嵌套:出现嵌套是,子级以父级为一个整体划分栅格

    清除浮动:在要清除浮动的元素前面添加:<div class="clearfix"></div>


    固定定位:affix

    3、响应式工具:

    针对不同设备展示或隐藏页面内容

    可见类:visible-(lgmdsmxs)-(blockinlineinline-block)
    隐藏类:hidden-(lgmdsmxs)


    4、Glyphicons字体图标:

    好处:减少请求、容易控制样式

    将font文件夹放在同一目录,或者更改bootstrap.css源码中的font-face的url

    <span class="glyphicon glyphicon-search"></span>

    5、预定义样式风格:

    default 默认、 primary 首选项、success 成功 、info 一般信息、warning警告、danger危险

    btn-primary、text-primary、bg-primary、alert-warning、panel-warning等...


    6、按钮:

    基类:btn
    样式:btn-default、btn-link(链接)...
    大小:btn-(lg、sm、xs)
    状态:active、disabled
    种类:a、input、button
    块级:btn-block
    按钮组:btn-group、btn-group-justified(根据父级自适应)、btn-group-vertical、btn-group-(lgsmxs)
    注意:当使用btn-group-justified时,a类按钮可以实现对应效果,button和input类要给每一个按钮添加一个父级div设置class为btn-group
    纵向按钮btn-group-vertical,不需要再添加btn-group
    按钮小箭头:(默认dropdown向下,向上添加dropup类)<button class="btn btn-primary"><span class="caret"></span></button> 
    注意:input不行



    7、下拉菜单

    data- : JS交互触发器的接口
    aria- role='' :针对特殊人群(盲人)

    基类:dropdown
    下拉按钮:class:btn btn-default dropdown-toggle 、默认关闭,展开open 、data-toggle="dropdown"
    下拉列表:dropdown-menu
    下拉列表分组标题:dropdown-header
    下拉列表分组的分割线:divider



    ····看文档

  • 相关阅读:
    最短母串
    noip模拟测试7
    linux下的对拍程序
    noip模拟测试6
    QWidget 前后位置设定
    C++编程规范_第5~13条 设计风格
    random /timer/sort 示例代码
    资料准备
    【转】三维动态数组 分配与释放
    批量修改文件名
  • 原文地址:https://www.cnblogs.com/hello-web/p/7221474.html
Copyright © 2011-2022 走看看