Bootstrap全局 CSS样式

最新推荐文章于 2024-05-18 06:08:21 发布

VIP文章 --mq--

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量515

点赞数 2

分类专栏： Bootstrap 文章标签： css bootstrap html

本文链接：https://blog.csdn.net/m12120426/article/details/124519443

版权

一、概览

HTML5 文档类型

Bootstrap使用到某些元素和css属性需要将页面设置为HTML5文档类型，在你项目中的每个页面都要参照下面的格式进行设置

移动设备优先

针对移动设备的样式融进了框架的每个角落，而不是增加一个额外的文件，为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签

布局容器

Bootstrap徐涛为页面内容和栅格系统包裹一个.container容器

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

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

二、栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或者视口尺寸的增加，系统会自动分为最多12列

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (>=768px)	中等屏幕桌面显示器 (>=9992px)	大屏幕大桌面显示器 (>=1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些值时将变为水平排列
.container最大宽度	None（自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-sm-	.col-lg-
列数	12
最大列宽	自动	~62px	~81px	~97px
槽宽	30px（每列左右均有15px）
可嵌套	是
偏移	是
列排序	是

三、首页整合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4：首页整合</title>
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入bootstrap的CSS

最低0.47元/天解锁文章

--mq--

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap全局 CSS样式

一、概览HTML5 文档类型Bootstrap使用到某些元素和css属性需要将页面设置为HTML5文档类型，在你项目中的每个页面都要参照下面的格式进行设置移动设备优先针对移动设备的样式融进了框架的每个角落，而不是增加一个额外的文件，为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=
复制链接

扫一扫