欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

使用 BootStrap（图形详情）

最编程 2024-07-18 09:12:18
...

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>

上一篇： 分析 Spring JdbcTemplate 模板的常见添加、删除、修改和查询操作

下一篇： TabNine 代码完成工具体验 - 费用

推荐阅读