bootstrap4 入门学习

最新推荐文章于 2023-09-13 20:22:08 发布

原创最新推荐文章于 2023-09-13 20:22:08 发布 · 755 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端专栏收录该内容

6 篇文章

订阅专栏

下载

这里有三个版本，初级学习先选择上图的
下载好后，解压，新建一个learn_bootstrap，再建一个其子目录lib ，将解压后的bootstrap-4.5.0 更名为bootstrap ,然后copy 到 lib 目录下，效果如下图

在这里插入图片描述
在lib 目录下再下载一个jquery :
http://jquery.com

打开brackets , 文件–>打开目录–>learn_bootstarp,如下图：
新建一个文件 index.html

记得brackets 安装插件：
1. HTML Skeleton 可以快速的为你的 HTML 文件插入基本的标签，如doctype声明、html、head、body等等 https://github.com/le717/brackets-html-skeleton
2. Emmet(原名Zen coding)，快速书写HTML/CSS必备神器，菜单栏直接出现选项按钮，若不能安装，就下载zip拖拽到工具内
http://emmet.io/
这里建议在“扩展管理器–> 可获取–> 搜索框输入emment”, 这个安装好后，会在导航栏中显示。

有了它就会很方便：例如文档中输入！，再按一个tab 键

例如文档输入 meta:vp ,再按一个tab键
```
 3. 插件安装可以参考地址： https://blog.youkuaiyun.com/WAN_EXE/article/details/70307661?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
```
先完成一个基本的页面
写一个小案例：

运行可以看到：运行快捷键 alt+ctrl+p, 内容会随着窗口而全部显示
在这里插入图片描述

若想居中显示，则：
在这里插入图片描述

网格类：将页面分割为指定的个数
bootstrap3 上12格
col-xs-* 手机上使用，窗体网格小于768像素
col-sm-* ipad上使用，窗体的网格大于等于768
col-md-* 电脑上使用，窗体的网格大于992像素
col-lg-* 大尺寸使用，窗体的网格大于1200像素

Bootstrap 4 网格系统有以下 5 个类:
col- 针对所有设备
col-sm- 平板 - 屏幕宽度等于或大于 576px
col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

bootstrap4它的源码是采用 Sass 语言编写的使用flex的布局方式全部使用了rem为单位（除了部分的margin和padding使用px）Bootstrap 4 共有5种栅格类，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。
bootstrap3使用float的布局方式bootstrap3 共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)
bootstrap3里面使用push和pull向左和向右移动

在这里插入图片描述混合网格布局：

效果如下：

在这里插入图片描述

在这里插入图片描述
嵌套布局：

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- meta:vp-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Bootstrap4 </title>
     <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <div class="container">
        <div class="row">
         <div class="col-md-8 ">
                <h1 class="page-header">主体</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet incidunt perspiciatis earum nostrum iste unde, eius ut dolore voluptatibus assumenda ea totam, praesentium veritatis eligendi numquam! Quaerat quia at illo.</p>
               <div class="row">
                    <div class="col-md-4">
                     <h2>区块1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam delectus quas corrupti omnis facilis reiciendis praesentium unde officiis ea, quod fugiat commodi, accusantium doloremque totam consectetur. Maiores optio aut et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro hic perferendis libero minus, enim esse quos harum et incidunt atque est, tempore reiciendis rem, ipsam quod repellendus amet unde. Quaerat.</p>
                        </div>
                    <div class="col-md-4">
                        <h2>区块2</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam delectus quas corrupti omnis facilis reiciendis praesentium unde officiis ea, quod fugiat commodi, accusantium doloremque totam consectetur. Maiores optio aut et.</p>
                    </div>
                    <div class="col-md-4">
                        <h2>区块3</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam delectus quas corrupti omnis facilis reiciendis praesentium unde officiis ea, quod fugiat commodi, accusantium doloremque totam consectetur. Maiores optio aut et.</p>
                        </div>
                    <div class="clearfix"></div> <!--若位置有问题，可以使用改标签修复浮动问题，这里也可以将区块1-3放在一个row中，将区块5-6放在一个块内-->
                    <div class="col-md-6">
                        <h2>区块5</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam delectus quas corrupti omnis facilis reiciendis praesentium unde officiis ea, quod fugiat commodi, accusantium doloremque totam consectetur. Maiores optio aut et.</p>
                    </div>
                     <div class="col-md-6">
                        <h2>区块6</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam delectus quas corrupti omnis facilis reiciendis praesentium unde officiis ea, quod fugiat commodi, accusantium doloremque totam consectetur. Maiores optio aut et.</p>
                    </div>
                     </div>
            </div>
            <div class="cpl-md-4 ">
                <h1 class="page-header">边栏</h1>
                <p>Lorem ipsum dolor sit ametamet.</p>
            </div>
        </div>
    </div>
    <script src="lib/jquery-3_5_1_min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

效果图：
在这里插入图片描述
隐藏和显示：