web前端之bootstrap框架--2020-06-06

最新推荐文章于 2022-12-21 18:08:39 发布

兜里ヌ有糖

最新推荐文章于 2022-12-21 18:08:39 发布

阅读量162

点赞数

分类专栏：笔记文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_43980232/article/details/106588394

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

引入bootstrap（v3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<!-- 引用bootstrap必须设置可视窗 -->
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入css样式 -->
	</head>
	<body>
	
		<button type="button" class="btn btn-default" aria-label="Left Align">
		  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
		</button>
		<button type="button" class="btn btn-default btn-lg">
		  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
		</button>
		<!-- 可以用上面这部分代码测试bootstrap是否引入成功（引入成功浏览器页面会显示两个图标） -->

		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	<!-- 引入js'文件    注意必须先引用jquer.min.js然后在引用bootstrap.min.js（因为bootstrap依赖于jquery） -->
	</body>
</html>

引入bootstrap（v4）
v4版本的bootstrap 相比v3版本需要多引入一个popper.min.js 且需要的jQuery版本为3.5.1


    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <!-- 没找到Popper包资源，引用了官方提供的CDN -->
    <script src="js/bootstrap.min.js"></script>

可视窗设置语句：

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

布局容器
.container 类用于固定宽度并支持响应式布局的容器。（宽度大于等于768时两侧会有空余，不能占据宽度的百分之百）

<div class="container" style="background-color: #002752;color: white;">
	123
</div>

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

<div class="container-fluid" style="background-color: red;color: white;">
	456
</div>

效果图：
在这里插入图片描述

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之bootstrap框架--2020-06-06

引入bootstrap（v3）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  <ti
复制链接

扫一扫