bootstrap4使用的简单总结

最新推荐文章于 2024-09-13 07:32:07 发布

明快de玄米61

最新推荐文章于 2024-09-13 07:32:07 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/qq_42449963/article/details/108672056

版权

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

前言：

花了三天左右的时间来简单学习了一下bootstrap，跟着哔哩哔哩上面的视频做了一个案例网站首页，视频url地址是：https://www.bilibili.com/video/BV12W411F7Wo，我跟着老师敲出来的案例url地址是：https://pan.baidu.com/s/1WAH262ddSgLmbOP4sApY3w
提取码：tsdf，现在我对bootstrap有了一点新的认识，并不害怕这个框架了，反而有点喜欢它了，因为用他做网页就像是站在巨人的肩膀上编程序，简单来说就是两个字：“舒服”

模板：

使用H5标准构建一个最精简的模板：

<!doctype html>
<!--中文站点应该用zh-CN，外文站点应该使用en-->
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <!--移动设备优先, Bootstrap 4 不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的<head>区添加响应式的视图标签，简要的说就是优先引入下面一行，必须使用-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件，必须引入 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
	**********html代码************
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入，必须引入 -->
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 
	<!-- popper.min.js用于弹窗、提示、下拉菜单，bootstrap.bundle.min.js不能代替它，不然无法使用弹窗提示等效果，菜鸟教程上面的解释是错误的，这是我验证之后的结果，必须引入该js文件  -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
	<!-- 最新的 Bootstrap4 核心 JavaScript 文件，必须引入 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

总结来说：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">必须要写，上述1个boostrap的css文件必须要引入，3个bootstrap的js文件必须要引入，当然如果你部署真实的项目肯定不能用这些链接来引入css或者js文件，你可以去bootstrap官网上面下载bootstrap的js和css文件，但是上面不会有jquery和popper的js文件，你可以去jquery官网上下载jquery.js文件，对于popper.js来说，你可以新建一个popper.js文件，然后通过上面的链接（https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.js）去浏览器上找到该页面，点击Ctrl+A和Ctrl+C复制全部，然后使用Ctrl+V把代码复制到popper.js文件中，这里我也要说一下*.js和*.min.js的区别，*.js是编译之后的版本，里面可以给你提供提示等信息，在编写代码的时候需要使用该js文件，如果是上线的项目，那就需要使用*.min.js了，这是因为该js文件体积更小，运行速度更高

另外我们使用bootstrap的时候，不仅可以使用定义好的class名称，还可以自己去定义css代码去控制样式，js文件也可以自己写一部分，当然结合bootstrap给出的是最好的选择，能用他的就不要自己去写，毕竟人家已经写好了，何必在造轮子呢，例如轮播图的js文件就是这样，bootstrap给了我们很大的空间去使用他给的方法去定制我们的轮播图，所以bootstrap是我们写css和js的一个帮手，可以帮助我们更快构建网页结构，并且可以很好的完成响应式网页布局

使用注意：

网格系统或者栅格系统用的是比较多的，里面常用到的几个类要清楚，他们分别是：

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

里面的sm、md、lg、xl不仅用在这个地方，也可以用在其他地方，比如mb-lg-3代表margin-bottom:*px只在大于等于992px的屏幕上起作用，否则不起作用，以及d-lg-block代表只在大于等于992px的屏幕上display:block，记着当设置sm、md、lg、xl之后代表只有符合屏幕宽度要求的时候才会起作用，否则不会起作用，另外弹性盒子用的也比较多，这些使用我都在代码中做了详细说明，毕竟结合具体的例子更好看，用到相关效果的时候，建议去看一下菜鸟教程或者官网上的案例，最好的方法就是把案例复制下来，然后在案例的基础上根据教程或者官网的解释进行改编

资料：

我主要看了菜鸟教程上面的bootstrap4教程，网址是：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html，另外在做案例途中使用了bootstrap的中文官网的文档，网址是：https://getbootstrap.net/docs/getting-started/introduction/，发现上面比菜鸟教程讲的更深，不过菜鸟教程上面的代码更好理解，可以在看了菜鸟教程之后在去看bootstrap中文官网的文档，不过最好的其实还是英文官网的文档，毕竟翻译过来的还是没有那么专业，可能某些地方会翻译的词不达意，甚至出现错误都是有可能的，bootstrap英文官网的网址是：https://getbootstrap.com/docs/4.5/getting-started/introduction/，在我的代码中也有比较详细的介绍，毕竟官网上有些class用法可能说的太笼统，不好理解，通过代码可以帮助你去理解相关的class，比如mb-3、mb-lg-3、pb-1等等我都是在编写代码的途中学习到如何使用的