可能会派上用场的辅助类

文字:

.text-muted  颜色 #777

.text-muted {
    color: #777;
}

背景:

  不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:  .bg-primary  等

其他:

  浮动: .pull-left     .pull-right     

  居中显示: .center-block    设置元素为块元素,并且居中显示

  清楚浮动: .clearfix    在bootstrap中通过给父元素container  添加伪类      .clearfix::before{ clear: both}     .clearfix::after{clear: both} (!不对的请指出)

        .row {  //行  bootstrap 把一行分成12份或列  
            margin-right: -15px;
            margin-left: -15px;
        }
        .col-xs-1 {  //在xs尺寸屏占1列     一列 父元素的  width: 8.33333333%;
           position: relative;
           min-height: 1px;
           padding-right: 15px;
             padding-left: 15px;

          float: left;     // 浮动布局     且元素有内边距    注意在父元素上清楚浮动   .clearfix
        }

  显示下拉功能: .caret

    定义一个下拉功能的按钮:    (摘自菜鸟教程)
    <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>

    

    .dropup,  .dropdown{position: relative}

     .dropdown-toggle:focus {  outline: 0;}

    .btn-group{ position: relative;    display: inline-block;   vertical-align: middle;}   //相对定位

    .btn-group >.btn   //相对定位,浮动
       {   
       position: relative;
        float: left;    }

    .dropdown-menu {   //绝对定位
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;   //默认隐藏
        float: left;
        min-width: 160px;
        padding: 5px 0;    //padding-top: 5px ; padding-bottom: 5px
        margin: 2px 0 0;  //margin-top: 2px  上方的距离
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
              background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
             box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }

  阅读上显示,其他隐藏:     .sr-only

   显示隐藏:  .show    .hidden

  

转载于:https://www.cnblogs.com/baota/p/6496496.html

bootstrap 辅助类相关推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:表格单元格使用了 bg-primary 类...

    <!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:在元素获取焦点时显示(如:键盘操作的用户)...

    <!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

  3. BootStrap-

    BootStrap- BootStrap:框架  响应式布局, 创建项目选择 1.Twitter Bootstrap https://v3.bootcss.com/css/#girl  --样式介绍 ...

  4. bootstrap 元素

    Bootstrap 笔记元素 学习网址:http://www.runoob.com/bootstrap/bootstrap-tutorial.html Bootstrap CSS Bootstrap ...

  5. Bootstrap 响应式开发(2021.10.13)

    目录 一.响应式开发 1.框架含义 2.响应式 3.响应式尺寸划分 二.Bootstrap简介 1.Bootstrap概念 2.查阅Bootstrap文档 3.Bootstrap的使用 (1)创建文件 ...

  6. Web前端:Bootstrap最强总结 附详细代码 (带常用案例!)

    Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最 ...

  7. 【Bootstrap】常用组件(框架)

    Bootstrap常用组件 - 目录 1.网格系统(Grid System) - 网格系统的工作原理 - 不同设备的尺寸定义与其对应类名 - 基本的网格结构 - 偏移列 2.Bootstrap 表格 ...

  8. Bootstrap 内容聚合

    一.Bootstrap 内容聚合 基于Bootstrap4 1.1 Bootstrap CSS Bootstrap 环境安装 Bootstrap 网格系统 Bootstrap 排版 Bootstrap ...

  9. Bootstrap框架菜鸟入门教程

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...

最新文章

  1. 在winform中从外部拖动节点到树形结构(treeview和listview相互拖动)(一)
  2. APL开发日志--2012-11-08
  3. Leetcode 79. 单词搜索 (每日一题 20210720 同类型题)
  4. python pyecharts_Python数据可视化之pyecharts
  5. Spring IoC 源码导读
  6. Linq使用Group By
  7. string.intern_使用String.intern()减少内存使用
  8. android程序的入口点,常见android面试基础题
  9. Python学习笔记:求一组数据的众数
  10. 融云发送图片消息_IM消息ID技术专题(五):开源分布式ID生成器UidGenerator的技术实现...
  11. 文艺编程 Literate Programming (原文中英文对照)
  12. 代码审查反馈提交修复时,是否应该压缩提交?
  13. 常用数学符号大学(包含罗马字符)
  14. 用python在大麦网抢票视频_大麦网怎么抢票快 大麦网抢票最快的方法
  15. [凯立德]2013年12月凯立德2013秋季版2F21J0E发布_我是亲民_新浪博客
  16. Aras innovator: 如何制作一个itemtype的BOM结构
  17. ★ 最长递增子序列问题 (最多不相交路径)(分层思想) 网络流最大流
  18. RT_Thread_串口数据解包
  19. 小旋风蜘蛛池X6.21去除授权站群+修复空白+弹窗
  20. W5100S SPI+DMA 中的片选信号处理

热门文章

  1. 利用Tomcat的用户名和密码构建“永久”后门
  2. 多柱汉诺塔最优算法设计探究
  3. cocos2d里面如何实现MVC(一)
  4. 商汤港理工提出基于聚类的联合建模时空关系的 GroupFormer 用于解决群体活动识别问题,性能SOTA...
  5. 自动特征工程、NAS、超参调优和模型压缩,微软开源的NNI一库搞定!
  6. CVPR 2019 | 旷视提出极轻量级年龄估计模型C3AE
  7. OpenCV手部关键点检测(手势识别)代码示例
  8. oracle 没有索引删除一行数据_Oracle数据库之索引
  9. 厉害了,比Transformer还好用!
  10. 自动驾驶计算本车离期望轨迹距离的方法