菜单

bootstrap辅助类

2018年11月15日 - Bootstrap

 

得经过bootstrap的辅助类实现要素的对齐(左右针对伙同,居中)显示.

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

.pull-left素浮动至左侧

 下拉列表

.pull-right 元素浮动至右手

<body>
    <div >
      <h2>实例</h2>
      <p> .caret 类显示了一个下拉的功能: </p>
      <p> .caret 类在按钮中使用:</p>
      <div >
        <button type="button"  data-toggle="dropdown">Menu </button>
        <ul  role="menu">
          <li><a  >一个链接</a></li>
          <li><a  >另一个链接 link</a></li>
          <li><a  >其他功能</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>

.center-block 居中显得 设置元素呢 display:block

 清除浮动

.clearfix 清除浮动

<div    >
   <div   >
      向左快速浮动
   </div>
   <div   >
      向右快速浮动
   </div>
</div>

 


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图