博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap基本布局
阅读量:5963 次
发布时间:2019-06-19

本文共 1745 字,大约阅读时间需要 5 分钟。

中文
API

bootstrap.cn

HTML5文档 类型

移动设备优先

width 属性控制设备的宽度。设置为 device-width 确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为
viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,
maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

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

布局容器

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

<div class="container"></div>

.container-fluid 类用于100%宽度,占据全部视口的容器

<div class="container-fluid"></div>

栅格系统

栅格系统通过行(
row)与列(column)组合页面布局

行(
row)必须在容器.container或。container-fluid中.

栅格系统中的列是通过指定
1到12的值来表示范围

超小屏幕(
<768px) .col-xs-列

小屏幕(
>=768px).col-sm-列

中等屏幕(
>=992px).col-md-列

大屏幕(
>=1200px).col-lg-列

<div class="container main">

<div class="row"><!--小屏幕两列。中等屏幕四列-->

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div>

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div>

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div><div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

列偏移

.col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 *范围是从 1 到 11。

列排序

.col-md-push-*和.col-md-pull-*

显示或隐藏

.show和hidden类可以强制任意元素显示或隐藏

响应式隐藏或显示

显示

超小屏幕(
<768).visible-xs-*

小屏幕(
>=768).visible-sm-*

中等屏幕(
>=992).visible-md-*

大屏幕(
>=1200).visible-lg-*

.visible-*-*类有三种变体,每个针对CSS中不同的display

.visible-*-block

.visible-*-inline

.visible-*-inline-block

隐藏

超小屏幕(
<768).hidden-xs

小屏幕(
>=768).hidden-sm

中等屏幕(
>=992).hidden-md

大屏幕(
>=1200).hidden-lg

快速浮动

任意元素向左或者向右浮动

.pull-left和pull-right

<div class="pull-left"></div><div class="pull-right">

</div>

不能用于导航条组件中

导航条使用
.navbar-left或.navbar-right

<ul class="nav navbar-nav navbar-left"></ul><ul class="nav navbar-nav navbar-right"></ul>

水平居中
center-block

清除浮动
.clearfix

想要学习前端开发的同学,可以加群:
543#6273#93 学习哦!

转载地址:http://sljax.baihongyu.com/

你可能感兴趣的文章
ubuntu安装VNC、Xfce桌面
查看>>
浅析支付系统的整体架构
查看>>
二位数组
查看>>
unix文件权限
查看>>
Python 模拟鼠键
查看>>
【Marva Collins' Way】第二章
查看>>
SDUT OJ 数据结构实验之链表一:顺序建立链表
查看>>
舒适的旅行(并查集)
查看>>
django-uuslug: 方便的将中文转化成拼音 slug 的工具
查看>>
布局类组件介绍
查看>>
Nginx反向代理+负载均衡简单实现
查看>>
树的操作
查看>>
键盘按键和键盘对应代码表:
查看>>
jquery中链式调用原理
查看>>
AYUI7 WPF MVC插件欣赏
查看>>
IBatis.Net学习笔记十二:发现一个好用的IBatis.Net生成工具
查看>>
多线程-生产者消费者(lock同步)
查看>>
十、C# 异常处理
查看>>
网页录音
查看>>
20155224 2016-2017-2 《Java程序设计》第8周学习总结
查看>>