zoukankan      html  css  js  c++  java
  • bootstrap框架-----可见 隐藏

    可见框架-像素选择 -block-inline  :块内联元素

                           -inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和高度地块元素的属性

    visible-md sd sx  -   block-inline  ;  inline-block;

    hidden:隐藏用法=visible;    

    class='pull left'    左浮动     class='pull right'   右浮动

    affix:绝对定位!    margin:0;     left:0;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <style>
    div[class*='col-']{ background:#666; border:1px solid #039; min-height:50px; color:#FFF;}
    </style>
    <body>
    <div class="container">
            <div class="row">
            <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
            <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
            </div>
    </div>
    </body>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-1.11.1.js"></script>
    </html>

    利用浮动做侧边框 pull-right; pull-left

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <style>
    .dip1{ 35px; height:300px; background:#03C; color:#CCC;}
    .dip2{ 60px; height:500px; background:#13C; color:#CCC;}
    </style>
    <body>
    <!--<div class="container">
            <div class="row">
            <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
            <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
            </div>
    </div>-->
    <div class='container-fluid pull-right'>
    <div class="row"><!--解决边界-->
    <div class="hidden-lg dip1 pull-right">小于960显示
    </div>
    <div class="visible-lg-block dip2">大于960时显示
    </div>
    </div>
    </div>
    </body>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-1.11.1.js"></script>
    </html>

     利用绝对定位affix    margin:0;     left:0;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <style>
    .dip1{ 35px; height:300px; background:#03C; color:#CCC; right:0;}
    .dip2{ 60px; height:500px; background:#13C; color:#CCC; right:0;}
    </style>
    <body>
    <!--<div class="container">
            <div class="row">
            <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小于960像素出现</div>
            <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小于960像素隐藏</div>
            </div>
    </div>-->
    <div class='container-fluid affix'>
    <div class="row"><!--解决边界-->
    <div class="hidden-lg dip1 affix">小于960显示
    </div>
    <div class="visible-lg-block dip2 affix">大于960时显示
    </div>
    <div>Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 </div>
    </div>
    </div>
    </body>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-1.11.1.js"></script>
    </html>
  • 相关阅读:
    c++调用win32API控制打印机打印
    php socket 通信
    [SDOI2015][BZOJ3991] 寻宝游戏|set|dfs序|虚树|树上倍增LCA
    [NOI2015][BZOJ4195] 程序自动分析|并查集|离散化
    [NOI2015][BZOJ4196] 软件包管理器|树链剖分
    [HEOI2014][BZOJ3611] 大工程|虚树|树型dp|dfs序|树上倍增LCA
    [Usaco2007 Mar][BZOJ1638] Cow Traffic 奶牛交通|动态规划
    [HDU2222]Keywords Search|AC自动机
    [POI2007][BZOJ1103] 大都市meg|dfs序|树状数组
    [Usaco2007 Dec][BZOJ1690] 奶牛的旅行|分数规划|二分|SPFA
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5891359.html
Copyright © 2011-2022 走看看