前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》

csj50

已于 2022-11-01 14:35:26 修改

阅读量1.3k

点赞数

分类专栏：前端基础文章标签： bootstrap 前端

于 2022-11-01 10:10:01 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/127628631

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

一、Bootstrap要点

1、bootstrap全局CSS样式
2、bootstrap CSS组件
3、bootstrap javascript插件

其实就是官网上的这三个。

二、项目引入Bootstrap

1、css目录
bootstrap.css：是供我们学的没有压缩版
bootstrap.min.css：是去除空格和回车，压缩版

2、js目录
bootstrap.js：非压缩的学习版本
bootstrap.min.js：压缩版本

3、引入的配置

<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>

js先引入jquery。

三、支持手机等移动设备

1、在<head>中添加

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

作用是让代码可以检测到手机屏幕的宽度。

四、布局容器

1、相当于一个div作为main框架居中。左边和右边间距相等。

2、container

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<title>bootstrap</title>
<style>
    .container {
        background-color: #ccc;
        height: 300px;
    }
</style>
</head>

<body>
	<div class="container">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    </div>
</body>

<script>
	
</script>

</html>

container的宽会自动进行计算。

五、栅格系统

1、bootstrap把屏幕有效的宽度，平均分成12个小格。
.row：一行12列。

2、官方提供了多种列宽的形式

最常用的是col-md-xxx。xxx表示占几列，最大12。
.col-md-3：占3列的宽。
col-xs-xxx不会堆叠，图片和字会越缩越小，不建议使用。

3、例子

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<title>bootstrap</title>
<style>
    .container {
        background-color: #ccc;
        /*height: 300px;*/
    }

    .row {
        margin-bottom: 15px;
    }

</style>
</head>

<body>
	<div class="container">
        <h1>bootstrap前端框架</h1>
        <div class="row">
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
        </div>
    </div>
</body>

<script>
	
</script>

</html>

效果：

4、col-md-offset-3
左边空出三个格子出来。

<body>
	<div class="container">
        <h1>bootstrap前端框架</h1>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
            <div class="col-md-3">
                <img src="bs/image/222.jpg" />
            </div>
        </div>
    </div>
</body>

效果：