<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>辅助类和响应式工具类</title>

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

</head>

<style type="text/css">

    .a{

        height: 50px;

        width: 200px;

        border: 1px solid #ccc;

        background-color: #eee;

    }

</style>

<body style="margin:50px;">

    <!-- 辅助类 -->

    <!--

    前景色

    text-muted：柔和灰

    text-primary：主要蓝

    text-success：成功绿

    text-info：信息蓝

    text-warning：警告黄

    text-danger：危险红

    背景色

    bg-primary：主要蓝

    bg-success：成功绿

    bg-info：信息蓝

    bg-warning：警告黄

    bg-danger：危险红

     -->

     <p class="text-muted">bootstrap柔和灰</p>

     <p class="text-primary">bootstrap主要蓝</p>

     <p class="text-success">bootstrap成功绿</p>

     <p class="bg-info">bootstrap信息蓝</p>

     <p class="bg-warning">bootstrap警告黄</p>

     <p class="bg-danger">bootstrap危险红</p>

    <!-- 关闭按钮 -->

    <button class="close">&times;</button>

    <!-- 三角符号 -->

    <span class="caret"></span>

<hr>

    <!-- 快速浮动 -->

    <div class="pull-left a">

        左边

    </div>

    <div class="pull-right a">

        右边

    </div>

    <!-- 块级居中 -->

    <div class="center-block a">居中</div>

    <hr>

    <!-- 清理浮动 -->

    <div class="pull-left a">

        左边

    </div>

    <div class="clearfix"></div>

    <div class="a">

        右边

    </div>

    <hr>

    <!-- 显示和隐藏 -->

    <div class="show">

        显示

    </div>

    <div class="hidden">

        隐藏

    </div>

    <!--

                    超小屏幕        小屏幕        中等屏幕        大屏幕

    .visible-xs-*    见                藏            藏            藏

    .visible-sm-*    藏                见            藏            藏

    .visible-md-*    藏                藏            见            藏

    .visible-lg-*    藏                藏            藏            见

    .hidden-xs       藏                见            见            见

    .hidden-sm       见                藏            见            见

    .hidden-mc       见                见            藏            见

    .hidden-lg       见                见            见            藏

    对于显示的内容，有三种。分别为：block、inline-block、inline

     -->

     <!-- 超小屏幕显示 -->

    <div class="visible-xs-block a">超小屏幕激活显示</div>

    <!-- 超小屏幕隐藏 -->

    <div class="hidden-xs a">超小屏幕隐藏</div>

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

</html>

bootstrap——辅助类和响应式工具类的更多相关文章

  1. Bootstrap内辅助类，响应式工具，组件的个人总结

    辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, torto ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具

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

  3. Bootstrap(6)辅组类和响应式工具

    一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...

  4. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  5. Bootstrap 辅组类和响应式工具

    1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...

  6. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  7. bootstrap 学习笔记（5）---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  8. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

随机推荐

  1. 在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法

    参考原贴地址:https://blog.csdn.net/clementad/article/details/47339519 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Trans ...

  2. CodeBblock 常用快捷键 （最常用）

    ==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小. • 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling. • C ...

  3. 简易selenium自动化测试框架(Python)

    最近空闲时间在探索Selenium的自动化测试,简单的写了一个小框架来测试公司的一个web产品.该框架包括以下模块: 1. Test case编写模式(page模式,参考之前的博文http://www ...

  4. 【原创】angularjs1.3.0源码解析之执行流程

    Angular执行流程 前言 发现最近angularjs在我厂的应用变得很广泛,下周刚好也有个angular项目要着手开始做,所以先做了下功课,从源代码开始入手会更深刻点,可能讲的没那么细,侧重点在于 ...

  5. Linux之Ubuntu无线网络配置

    无线网络使用问题: 0.插上有线网络电线与电脑NIC上. 1.set->系统设置->软件和更新->Ubuntu软件->下载自:   选择一个网络服务器地址(软件源)[http: ...

  6. luogu P1979 [NOIP2013] 华容道

    传送门 这道题中,棋子的移动是要移动到空格上去,所以空格要在棋子旁边才能移动棋子;而棋子移动的方向由空格决定 所以我们可以记三维状态\(di_{i,j,k}\),表示状态为棋子在\((i,j)\),空 ...

  7. linux下比较两个文本文件的不同——diff命令

    1>Diff命令的功能Linux中Diff命令的功能为逐行比较两个文本文件,列出其不同之处.它对给出的文件进行系统的检查,并显示出两个文件中所有不同的行,不要求事先对文件进行排序. 2>语 ...

  8. Android关于RAM、ROM、SD卡以及各种内存的区别

    RAM:运行时内存.相当于PC机的内存存储,用于存储应用运行时的各种对象和变量常量等,主要作用在于提高运行速度.是唯一一种断电后数据会清除的存储器. 机身内存:相当于PC机硬盘.主要包括三块区域:RO ...

  9. 让webstrom更好用的设置

    一.让webstrom在编辑vue项目时更快 1.在webstrom的项目管理树中,找到node_modules文件夹,在文件夹上点右键,在出来的右键菜单中选择“Mark Directory as” ...

  10. C# List分页

    假设你每页10条数据当前是第3页 跳到第4页则:List.Skip((4-1)*10).Take(10) 本文来自SunShine,转载请标明出处: http://do.jhost.cn/sunshi ...