简单易上手的bootstrap框架一看就会

最新推荐文章于 2023-08-02 19:22:24 发布

不会写代码的柴犬

最新推荐文章于 2023-08-02 19:22:24 发布

阅读量478

点赞数

文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/weixin_45568677/article/details/117635898

版权

什么是bootstrap框架是一种响应式框架，也就是可以适应不同大小的屏幕进行比例缩放，也可以做到一套代码适应PC端和移动端。

—怎么使用这套框架呢可以去点击去到bootstrap官方网站预览学习也可以听我细细道来。
—bootstrap框架主要是是在class类名的应用上，只要熟练掌握了就没什么问题，bootstrap是通过把屏幕分成12个等分官方性的来说是栅格系统布局。
—class主要的布局有 .container类是用于最大盒子布局bootstrap框架给予了该类一个固定宽度，.container-fluid类是用于适用该窗口全屏布局跟当前视口宽度一样的宽度。
—上面讲到的.container和.container-fluid是用于最大盒子布局，接下来是栅格布局类，栅格布局类一共有五种分别为.col-xl- .col-lg- .col-md- .col-sm- .col-这五种分别代表什么呢，听我细细道来：1.col-xl- ≥1200px是在屏幕大于等于1200时该盒子占比栅格系统12份中的多少份比如我要一个div在屏幕大于或等于1200px时让它沾满12份就是这样写<div class='col-xl-12'>：2..col-lg- ≥992px也是如上一样，在屏幕大于或者等于992像素时该元素占比栅格系统的多少份，只要看懂了前面的后面三个都不是问题。
—来列举一下这五个分别代表什么屏幕下会响应.col-xl- .col-lg- .col-md- .col-sm- .col-:col-xl- ≥1200px屏幕大于或者等于1200像素，.col-lg- ≥992px屏幕大于或者等于992像素，.col-md- ≥768px屏幕大于或者等于768像素，.col-sm- ≥576px屏幕大于或者等于576像素，.col- <576px是小于576像素时响应，这个时候应该是移动端了。
使用这款框架时需要引入的一些东西

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-4.6.0/dist/css/bootstrap.min.css">
    <script src="./jquery-1.11.3.js"></script>
    <script src="./bootstrap-4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2533047_3db4qi97a92.css?spm=a313x.7781069.1998910419.60&file=font_2533047_3db4qi97a92.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2533047_3db4qi97a92.css?spm=a313x.7781069.1998910419.63&file=font_2533047_3db4qi97a92.css">
</head>

讲了这么多来点实例吧

任何屏幕大小下都占比12份<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="div">不管任何屏幕大小都沾满整个屏幕，你可以按照自己想要当多大屏幕时占比多少设置
注意任何的 .col-xl- .col-lg- .col-md- .col-sm- .col-必须都要包裹在container-fluid或者containe里面

    <div class="container-fluid">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="div"> 
        </div>
    </div>

接下来看看我学习这款框架写的一个仿照星巴克官网网页吧~~

在这里插入图片描述

不会写代码的柴犬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
简单易上手的bootstrap框架一看就会

什么是bootstrap框架是一种响应式框架，也就是可以适应不同大小的屏幕进行比例缩放，也可以做到一套代码适应PC端和移动端。—怎么使用这套框架呢可以去点击去到bootstrap官方网站预览学习也可以听我细细道来。—bootstrap框架主要是是在class类名的应用上，只要熟练掌握了就没什么问题，bootstrap是通过把屏幕分成12个等分官方性的来说是栅格系统布局。—class主要的布局有 .container类是用于最大盒子布局bootstrap框架给予了该类一个固定宽度，.container
复制链接

扫一扫