12.2 全局CSS样式

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。

所有“列（column）必须放在 ” .row 内。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>实例：从堆叠到水平排列</title><!--    加载Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div></div><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以要先引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<!--加载 Bootstrap-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

显示效果为：

实例：移动设备和桌面屏幕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>实例：移动设备和桌面屏幕</title><!--    加载Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body><div class="container-fluid"><!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"><div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --><div class="row"><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><!-- Columns are always 50% wide, on mobile and desktop --><div class="row"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div></div></div><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以要先引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<!--加载 Bootstrap-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

显示效果为：

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。

这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>列偏移</title><!--    加载Bootstrap的CSS文件--><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body><div class="container-fluid"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div></div><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以要先引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<!--加载 Bootstrap-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

12.2 全局CSS样式相关推荐

bootstrap起步全局css样式概览全局css样式_栅格全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》
一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件其实就是官网上的这三个. 二.项目引入Boots ...
bootstrap全局css样式
一.富文本编辑器富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于比如谷歌.火狐效果都非常不错, 在功能的丰富性来说,还是IE强些(但 ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
微信小程序开发教程5：设置全局css样式
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
css 通用全局,通用全局CSS样式
PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...
uniapp实战项目（仿知识星球App) - - 配置开发工具和全局css样式
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
Bootstrap全局css样式的使用
教程目录 0x00 教程内容 0x01 准备环境 1. 新建HTML文件 2. 用浏览器打开 0x02 Bootstrap全局样式的使用 1. 引入Bootstrap样式资源 2. 修改css样式 3 ...
bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

12.2 全局CSS样式

实例：从堆叠到水平排列

实例：移动设备和桌面屏幕

列偏移

12.2 全局CSS样式相关推荐

最新文章

热门文章