十八、前端必学Bootstrap美化（上篇）

举报
毛利 发表于 2021/07/15 07:38:36 2021/07/15
【摘要】 @Author：Runsen @Date：2019/05/26 @updated Date：2020/05/30 作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。 文章目录 Bootstrap为什么要用 Bootstrap...

@Author：Runsen
@Date：2019/05/26


@updated Date：2020/05/30

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。

文章目录

Bootstrap

  • 基于HTML，CSS，JS的简洁灵活的流行前端框架及交互组件集
  • 为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等
  • 它的最新版本是 4.3，有不少网站还在用 3.x

为什么要用 Bootstrap？

  • Twitter 出品，大厂开源产品 Github
  • 基于 Less，丰富的 Mixin
  • Responsive 的栅格系统（Grid），移动设备优先
  • 丰富的组件（HTML和JS）
  • 插件（比如 icon font – Font Awesome）

Bootstrap教程

Bootstrap 库的下载

进入中文官网，下载 用于生产环境的 Bootstrap，下载的目录如下：

PS：dist表示编译之后的文件，这在库文件中是很常见的。

因为 。

下面的是css和js的文件夹的内容

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

示例

很多时候，见到的像这样的class，比如bg-light，前面bg代表background背景的意思，指的是light线色的背景。

因此Bootstrap中的CSS都是属性的缩写，再比如在标签meta，其实是媒体文件的意思。但是需要用在移动端，加一个，content = width=device-width, initial-scale=1.0属性，其实就是大家看视频的时候都是全屏的

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Width=device-width => 表示页面宽度是设备屏幕的宽度；确保网页能被不同屏幕分辨率的设备正确呈现；
  • user-scalable=no => 是否可以调整缩放比例(yes/no)；
  • initial-scale=1.0 => 表示初始的缩放比例 ，以 1:1 的比例呈现，不会有任何的缩放；minimum-scale=0.5：最小允许的缩放比例；
  • maximum-scale=2.0：最大允许的缩放比例；

如果maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
这样设置后，图片或元素也设置style=”width:100%”，那么图片看起来也是全屏的了。

引入文件

bootstrap.js依赖jQuery，所以要先引用jquery.js 然后引用bootstrap.js

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">


<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Popper文件 -->
<script src="/scripts/popper.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>

栅格布局

<div class="container"> <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> <div class="row"> <div class="col-md-8 col-sm-6 col-lg-4"></div> </div>
</div>

栅格布局就是一个container的class。在下篇主要介绍。

Bootstrap 搭建项目

1、工程文件的目录结构

├─ Demo ·························· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

2、下载并引入 Bootstrap 库文件

见上一段的讲解。引入之后，如果需要引入 html5shiv、respond、jQuery 这三个库文件，就放在lib文件夹中。

  • html5shiv：让浏览器可以识别 HTML5 的新标签。如header、footer、section等。
  • respond.js：让低版本浏览器可以使用 CSS3 的媒体查询。

另外，我们还需要引入下面这个库：

  • jQuery：Bootstrap框架中的所有 JS 组件都依赖于 jQuery 实现。

我们可以把上面这三个库文件拷贝到 lib 文件夹中（注意引用的路径要写正确）。

3、字符集、Viewport设置、浏览器兼容模式

我们将 Bootstrap 的基础模板代码 copy到项目的index.html中，这其中就包括最前面的三个meta标签：

	<meta charset="utf-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

4、favicon（站点图标）

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

5、引入相应的第三方文件

 <!-- 引入 Bootstrap 的核心样式文件（必须） --> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <!-- 引入我们自己写的 css 样式文件--> <link rel="stylesheet" href="css/my.css">

	...

	<script src="lib/jquery/jquery.js"></script>
	<script src="lib/bootstrap/js/bootstrap.js"></script>
	<script src="js/my.js"></script>

注意，先引入第三方的文件，再引入我们自己写的文件。

6、默认字体

在我们默认的样式表中将默认字体设置为：

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

7、完成页面空结构

先划分好页面中的大容器，然后在具体看每一个容器中单独的情况。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>我的网站</title> <!--建议：第三方引用的css库放在上面，我们自己写的文件，都放在下面--> <!-- 引入 Bootstrap 的核心样式文件（必须） --> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <!-- 引入我们自己写的 css 样式文件--> <link rel="stylesheet" href="css/main.css"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]-->
</head>

<body>
<!-- 头部区域 -->
<header id="header">
</header>
<!-- /头部区域 -->

<!-- 广告轮播 -->
<section id="main_ad"></section>
<!-- /广告轮播 -->

<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->

<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->

<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->

<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->

<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->

<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>

</html>

相关资源

文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。

原文链接：maoli.blog.csdn.net/article/details/90489560

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Bootstrap 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入