Bootstrap 4 简单使用

最新推荐文章于 2022-12-06 17:46:13 发布

须弥菩提

最新推荐文章于 2022-12-06 17:46:13 发布

阅读量776

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_44554896/article/details/86531542

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开发工具与关键技术：Adobe Dreamweaver CC 2017   Bootstrap 4的使用
作者：孙水兵
撰写时间：2019年1月16

Bootstrap是当前世界主流的响应式、移动设备优先的门户和应用前端框架。使用它我们可以减少许多代码，并且让布局更加简单，完善。即使有一些布局不适合，我们也可以进行修改。
首先，我们应先下载Bootstrap 4 的离线版本（下载网址：中文网址： http://code.z01.com/v4/ 英文网址：https://getbootstrap.com/ jquery文件下载网址：https://www.jb51.net/zt/jquerydown.htm ））。下载完成之后，将其复制到我们的项目文件中，
在这里插入图片描述
其内容为：

其次，将Bootstrap 4引入到项目中（注意：自己要写的CSS最好要放在Bootstrap 4 CSS文件之后，否则样式修改可能达不到自己想要的效果
jQuery文件应放在Bootstrap 4 文件之前（建议JS文件最好放在的上端，所有代码的后端））

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!--width=device-width 表示宽度是设备屏幕的宽度 initial-scale=1表示初始的方缩比例 shrink-to-fit=no自动适应手机屏幕宽度-->
<title>使用Bootstrap 4 进行网页布局</title>
<!--引入Bootstrap 4 CSS文件-->
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
<!--引入自己要写CSS文件-->
<link rel="stylesheet" href="css/zidingyi.css">

</head>

<body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--引入Bootstrap 4 js文件-->
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</body>

使用container-fluid布局（为父元素的100%）

<div class="container-fluid bg-dark p-5">
   
</div>

<!--引入 jQuery 文件-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--引入Bootstrap 4 js文件-->
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</body>

效果如下
在这里插入图片描述
使用container布局（container 类用于固定宽度并支持响应式布局的容器）

<div class="container bg-dark p-5">
   
</div>

效果如下在这里插入图片描述
使用网格系统（将一行分成12等份，需要多大可以自行调整，也可以使用auto自适应，即根据其内容的自然宽度来对列进行大小调整）
Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

<div class="container bg-dark p-5">
   <div class="row">
   <!--将一行分成12等份，如果不指定，将均等分配-->
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   	<div class="col-1"></div>
   </div>
   <div class="row">
   <!--将一行分成2等份-->
   	<div class="col"></div>
   	<div class="col"></div>
   </div>
</div>

颜色（如需背景颜色，只需将text替换为bg，如bg-danger代表背景颜色为红色）
在这里插入图片描述
Bootstrap 4 还有许多，需要了解可以到官网上了解
关于个人使用Bootstrap 4遇到的问题以及解决方法
1 .为a标签写了样式却没有反应：可以检查是否把Bootstrap 4 的css文件放在CSS文件的最前面

2. 明明引入了Bootstrap 4 js文件，却没有反应：可以检查是否引入jQuery文件，因为Bootstrap 4全局组件运行在 jQuery 组件上，其中包括 Popper.js, 以及系统内置 JavaScript 插件
在这里插入图片描述
3.关于自动换行问题：如果不想要页面宽度改变就换行；可以试一下给元素的父级元素加上w-100

须弥菩提

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 4 简单使用

开发工具与关键技术：Adobe Dreamweaver CC 2017 Bootstrap 4的使用作者：孙水兵撰写时间：2019年1月16Bootstrap是当前世界主流的响应式、移动设备优先的门户和应用前端框架。使用它我们可以减少许多代码，并且让布局更加简单，完善。即使有一些布局不适合，我们也可以进行修改。首先，我们应先下载Bootstrap 4 的离线版本（下载网址：中文网址：...
复制链接

扫一扫

专栏目录