BootStrap的使用

Bootstrap使用四步曲：1、创建文件夹；2、创建html骨架结构；3、引入相关样式文件；4、书写内容

一、创建文件夹结构

1、创建文件夹

按照以往的习惯创建文件夹。

2、下载Bootstrap

在官网下载压缩包，选择下载生产环境的压缩包，将其解压到项目目录下，但是不能覆盖你自己建的文件夹。

二、创建html骨架结构

先正常搭建一个html页面，然后再选中“基础模板”中的所需代码，复制到你自己搭建的html页面中。

三、引入相关样式文件

使用link标签引入css文件，这里以min.css为例。

四、书写内容

正常输入内容，如果发现内容没有了浏览器默认的内外边距，则证明css文件引入成功。

五、使用

这里使用按钮为例。在全局css中选中按钮，根据预定义样式选中你所需要的css按钮样式，然后复制对应的代码到你搭建好的Bootstrap结构中并允许查看成功与否。

六、代码

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <!-- 以最高版本的IE浏览器来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <title>初体验</title>
</head>

<body>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>

    <button type="button" class="btn btn-success">（成功）Success</button>

    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <button type="button" class="btn btn-warning">（警告）Warning</button>
</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/35358.html

BootStrap的使用（图文详解）