Bootstrap的使用

最新推荐文章于 2024-04-20 16:13:23 发布

榴莲不溜.

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量346

点赞数 1

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/weixin_73200795/article/details/131878345

版权

一、Bootstrap 12栅格系统

栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中

通过定义容器的大小，平分为12份
调整内外边距
结合媒体查询

1.Bootstrap 12栅格系统的使用

列组合
列偏移
列嵌套
列排序

1）列组合：col-md

运行结果：

2）列偏移：col-md-offset-

运行结果：

3）列嵌套为了使用内置的栅格系统将内容再次嵌套，可以在已存在的 .col-md-* 元素内添加一个新的 .row 元素和一系列 .col-md-* 元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12

运行结果：

4)列排序: col-md-push-

运行结果：

二、CSS全局样式

又称为CSS布局，是Bootstrap三大核心内容的基础

排版（Typography）标题、页面主体、对齐方式、列表
表单（Forms）基本实例、内联表单、水平排列的表单、校验状态、控件尺寸
按钮（Buttons）预定义样式、按钮尺寸
图片（Images）响应式图片、图片形状

1）排版--标题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap排版</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
<div class="container">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</div>pai'paiban
</body>
<script src="./bootstrap-3.4.1-dist/js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</html>