作业:构建网站 - 知识准备 - Bootstrap基础

Bootstrap可以说是CSS框架,后来加入了js插件。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

网址:Bootstrap中文网

bootstrap安装

<link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
<script src="../../JQuery/jquery-1.12.4.js"></script>
<script src="../../bootstrap3/js/bootstrap.js"></script>

bootstrap全局CSS样式

(1) HTML5文档类型

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

(2) 移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1">
备注:vscode中自动生成代码时有这一行

(3) 布局容器

以下两种容器类不能互相嵌套

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

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

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

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

(4) 栅格系统

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

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
    <script src="../../JQuery/jquery-1.12.4.js"></script>
    <script src="../../bootstrap3/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
        <div class="col-md-3">
            <img src="../../Images/1.jpg" width="100%" alt="">
        </div>
    </div>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/guchengyixin/article/details/106403710