2021 Bootstrap 5 多屏幕自适应 新手第一课

一个人懂得什么是真正的爱,才能够是一个真正成熟的人;否则你经常会看到很多人以爱的名义在伤害,控制,占有对方,,那么爱究竟是什么呢?为了促进自己和他人心智成熟,而不断拓展自我界限,实现自我完善的一种意愿,要看重心智成熟这件事情,心智成熟是我发生在你和被爱的那个人之间的两个人都需要达成心智成熟,这个是真正的爱;

这是一个不与人见面也能活的很好的年代,也能活得很好的年代,反而有点想与人相遇;选择Bootstrap从4开始抛弃float采用flex,到现在5 jq不见了之后好感度大增;

如果要说因为什么要选择Bootstrap我相信大多数人都是因为目前它是主流的css框架之一,另外一个绝对是自适应多屏幕;当然除了Vue之外,因为百度对Vue不是很友好,相反如果我讨厌它呢?那一定是它的移动端菜单,越说越气!

2021 Bootstrap 5 多屏幕自适应 新手第一课插图

本文想通过基础的使用操作,能够快速熟悉多屏幕的自适应上手。

注意

最开始的声明标签中要添加lang="en",不然你在使用过程中会有奇奇怪怪的样式。

<!doctype html>
<html lang="en">
</html>

导入文件

文件主要使用bootstrap.min.css和bootstrap.bundle.min.js,我们也可以使用在线的方式,但建议使用本地的版本;

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>

容器

 

容器样式文章最重重要的一个环境,因为他自适应由他控制;使用删格系统就必须在原始容器.container

​<div class="container"></div>

删格系统

Bootstrap把页面分成12个格子,也就是我们所说的删格系统;记住唯一的要点格子总和不能超过12,此外在用之前上一级必须要有rom标签。

<div class="row"></div>

有了rom之后才可以使用格子,格子也有不同类型针对不同屏幕

 

 

 

2021 Bootstrap 5 多屏幕自适应 新手第一课插图1

对于一个在N年前一只脚小拇指踩入Bootstrap的人来说(到现在基本都不会了),基本一套界面下来md足够了,如不不是有很特俗的需求之外。

简单操作

<div class="row">
  <div class="col-md-4">
    <div class="card border-info md-3 ">
      <div class="card-header">Header</div>
      <div class="card-body text-info">
        <h5 class="card-title">Info card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-primary md-3">
      <div class="card-header">Header</div>
      <div class="card-body text-primary">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-success md-3">
      <div class="card-header">Header</div>
      <div class="card-body text-success">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
      </div>
    </div>
  </div>
</div>
​

总结

 

使用之前html申明要添加lang="en"

自适应需要放在容器container

使用格子之前要有一个rom

格子基本md足够,一个rom下格子总不能超过12

本文对我来说也是复习Bootstrap方面知识,如果有一天做PC项目发现不是使用Bootstrap了,绝对是因为它家移动端菜单难受到我了。

另外的另外还有没有类似Bootstrap方面的框架呀!

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:1411156739@qq.com
THE END
分享
二维码
打赏
< <上一篇
下一篇>>