bootstrap-响应式工具和打印样式】的更多相关文章

响应式工具: <div class="container"> <!-- 针对不同的宽度 展示或隐藏相关内容 visible-lg-block 显示 hidden-lg 隐藏 --> <div class="row"> <div class="col-lg-4 visible-lg-block">1</div> <div class="col-lg-4 visible-lg…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">…
基本介绍 1.利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容. 基本使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&…
一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-muted">柔和灰</p> <p class="text-primary">主要蓝</p> <p class="text-success">成功绿</p> <p class="t…
Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.文本颜色 text-muted样式class类,写在当前元素里,文字颜色柔和灰(Bootstrap)text-primary样式class类,写在当…
辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="t…
1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootst…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>辅助类和响应式工具类</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </…
(一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放. 注意:如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center 代码:<img src="..." c…
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte…