bootstrap——css样式（一、栅格系统）

最新推荐文章于 2024-04-23 21:43:06 发布

zaichuanguanshui

最新推荐文章于 2024-04-23 21:43:06 发布

阅读量518

点赞数

分类专栏： web 文章标签： bootstrap css 栅格系统

本文链接：https://blog.csdn.net/zaichuanguanshui/article/details/54599256

版权

web 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

1、HTML5 文档类型

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

2、移动设备优先

为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3、布局容器

.container 和.container-fluid

4、.container 类用于固定宽度并支持响应式布局的容器。

“”	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
.container 最大宽度	None （自动）	750px	970px	1170px
栅格系统行为	总是水平排列
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
最大列（column）宽	自动	~62px	~81px	~97px

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

根绝屏幕大小自定设置固定宽度，然后通过margin实现居中

5、.container-fluid

可以将固定宽度的栅格布局转换为 100% 宽度的布局
需要配合.row-fluid使用，如果使用了.row每一行都会左右超出container15px

6、.row
margin：-15px

.row {
    margin-right: -15px;
    margin-left: -15px;
}

7、.row-fluid
取消 margin：-15px

8、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<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>

9、列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

col-md-push-3向右移动3列
col-md-pull-9向左移动9列

10、列
padding：15px

position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

zaichuanguanshui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
bootstrap——css样式（一、栅格系统）

bootstrap css 栅格系统
复制链接

扫一扫

专栏目录

bootstrap——css样式（一、栅格系统）

“相关推荐”对你有帮助么？