前端框架 — Bootstrap

最新推荐文章于 2024-03-12 13:45:02 发布

VIP文章 Struggle_Hard_Z

最新推荐文章于 2024-03-12 13:45:02 发布

阅读量807

点赞数 1

文章标签： bootstrap 前端框架 html

本文链接：https://blog.csdn.net/Struggle_Hard_Z/article/details/123113479

版权

前端框架Bootstrap

# 官网：https://v3.bootcss.com/

# 下载步骤
	1.进入官网直接点击下载
	2.选择用于生产环境的Bootstrap下载
	3.下载的压缩包 自行解压到能找到的文件路径
	4.使用框架调整页面样式一般都是操作标签的class属性即可

    
# bootstrap需要依赖于jQuery才能正常执行(动态效果)


# 引入方式
	本地引入(最完整的)
		1.引入jQuery
		2.引入bootstrap的css文件
		3.引入bootstrap的js文件
        
	CDN引入
		1.引入jQuery CDN
		2.引入bootstrap css的 CDN
		3.引入bootstrap js的 CDN
"""
CDN导入可以都写到pycharm默认文本模板中 今后在新建HTML文件就会自动添加：
进入 https://www.bootcdn.cn/twitter-bootstrap/ 官网
找到对应版本 选择复制链接

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
"""

在这里插入图片描述

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白



# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 200px;
        }
    </style>
    
</head>
<body>
  <div class="container c1">左右留白布局</div>
  <div class="container-fluid c1">左右不留白布局</div>

</body>
</html>

在这里插入图片描述

栅格系统

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

row		行  # 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份

HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>牛逼的网站</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel

最低0.47元/天解锁文章

Struggle_Hard_Z

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端框架 — Bootstrap

前端框架Bootstrap# 官网：https://v3.bootcss.com/# 下载步骤 1.进入官网直接点击下载 2.选择用于生产环境的Bootstrap下载 3.下载的压缩包自行解压到能找到的文件路径 4.使用框架调整页面样式一般都是操作标签的class属性即可 # bootstrap需要依赖于jQuery才能正常执行(动态效果)# 引入方式本地引入(最完整的) 1.引入jQuery 2.引入bootstrap的css文件 3.引入bootstra
复制链接

扫一扫