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-inline">2</div>
        <div class="col-lg-4 visible-lg-inline-block">3</div>
    </div>

    <div class="row">
        <div class="col-lg-4 hidden-lg">4</div>
    </div>
</div>

打印样式:

<div class="container">
    <!--
        visible-print-block:        只有在打印的时候显示
        hidden-print                打印的时候不显示
     -->
    <div class="row">
        <div class="col-lg-3 visible-print-block">1</div>
        <div class="col-lg-3 visible-print-inline">2</div>
        <div class="col-lg-3 visible-print-inline-block">3</div>
        <div class="col-lg-3 hidden-print">4</div>
    </div>
</div>
时间: 2024-10-13 22:00:58

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

移动web——bootstrap响应式工具

基本介绍 1.利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容. 基本使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&

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

Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色

Bootstrap 响应式实用工具

Bootstrap 响应式实用工具 http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都

Bootstrap 辅助类和响应式工具(四)

一.辅助类 <div class="container"> <p class="text-muted">Bootstrap练习系统学习,没有bg-muted 类别</p> <p class="bg-success text-success">Bootstrap练习系统学习</p> <p class="bg-danger text-danger">Boots

Bootstrap 辅组类和响应式工具

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

bootstrap 学习笔记(5)---- 图片和响应式工具

(一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放. 注意:如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center 代码:<img src="..." c

第 6 章 辅组类和响应式工具

学习要点: 1.辅组类 2.响应式工具 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具, 辅助类提供了一组类来辅组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 样式列表 样式名描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text

第6章 辅助类和响应式工具

本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容 . 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色 样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危

辅组类和响应式工具

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