zoukankan      html  css  js  c++  java
  • bootstrap之辅助类

    类 	                    描述 	
    .pull-left 	元素浮动到左边 	
    .pull-right 	元素浮动到右边 	
    .center-block 	设置元素为 display:block 并居中显示 	
    .clearfix 	清除浮动 	
    .show 	强制元素显示 	
    .hidden 	强制元素隐藏 	
    .sr-only 	除了屏幕阅读器外,其他设备上隐藏元素 	
    .sr-only-focusable 	与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户) 	
    .text-hide 	将页面元素所包含的文本内容替换为背景图 	
    .close 	显示关闭按钮 	
    .caret 	显示下拉式功能
    

     下拉列表

    <body>
        <div class="container">
          <h2>实例</h2>
          <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
          <p> .caret 类在按钮中使用:</p>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">一个链接</a></li>
              <li><a href="#">另一个链接 link</a></li>
              <li><a href="#">其他功能</a></li>
            </ul>
          </div>        
        </div>
    
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      </body>
    

     清除浮动

    <div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
       <div class="pull-left" style="background:#58D3F7;">
          向左快速浮动
       </div>
       <div class="pull-right" style="background: #DA81F5;">
          向右快速浮动
       </div>
    </div>
    
  • 相关阅读:
    【python】正则表达式
    Java 接口、抽象类
    设计模式之抽象工厂方法模式
    设计模式之工厂方法模式
    设计模式之单例模式
    pulltorefresh学习
    ProgressDialog使用
    android:descendantFocusability用法简析
    数据保存之File
    runOnUiThread学习
  • 原文地址:https://www.cnblogs.com/zhuiluoyu/p/4616012.html
Copyright © 2011-2022 走看看