<!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. python---定义一个session类(无错)

    import tornado.web #放在内存 redis 文件 数据库 container={} #定义一个session类 class Session: def __init__(self,ha ...

  2. VirtualBox设置共享文件夹

    前提是已经正确安装增强工具,在安装增强工具时,没有faile的,全部done 1.添加共享文件夹(已经在lmg下创建过目录 /mnt/bdshare ) sudo mount -t vboxsf Ba ...

  3. bzoj千题计划304:bzoj3676: [Apio2014]回文串(回文自动机)

    https://www.lydsy.com/JudgeOnline/problem.php?id=3676 回文自动机模板题 4年前的APIO如今竟沦为模板,,,╮(╯▽╰)╭,唉 #include& ...

  4. Neural Networks and Deep Learning(week4)Building your Deep Neural Network: Step by Step

    Building your Deep Neural Network: Step by Step 你将使用下面函数来构建一个深层神经网络来实现图像分类. 使用像relu这的非线性单元来改进你的模型 构建 ...

  5. 5. SprigBoot自动配置原理

      配置文件到底能写什么?怎么写? 都可以在SpringBoot的官方文档中找到: 配置文件能配置的属性参照   1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功 ...

  6. readn.c

    #include <errno.h> #include <unistd.h> ssize_t readn(int fd, void *vptr, size_t n) { siz ...

  7. MyBatis第一个案例-----永远的HelloWorld 含所有代码

    1.创建表emp CREATE DATABASE mybatis; USE mybatis; CREATE TABLE emp( id INT(11) PRIMARY KEY AUTO_INCREME ...

  8. SSM-1第一章 认识SSM框架和Redis

    第一章 认识SSM框架和Redis   1.1 Spring框架 Sring理念  Ioc  控制反转  IOC是一个容器,在Spring中,它会认为一切Java资源都是JavaBean,容器的目标是 ...

  9. 【BZOJ】3282: Tree(lct)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3282 复习了下lct,发现两个问题.. 1:一开始我以为splay那里直接全部rot(x)就好了,然 ...

  10. 20155209 2016-2017-2 《Java程序设计》第九周学习总结 ## 教材学习内容总结

    教材学习内容总结 JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的数据. 执行流程: •连接数据源,如:数据库. •为数据库传递查询和更新指令. •处理数据库响应并返回的结 ...