Bootstrap 初识

最新推荐文章于 2024-09-25 14:00:00 发布

刘哈哈哈哈

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量156

点赞数

文章标签： visual studio code javascript

本文链接：https://blog.csdn.net/lxy123456qqq/article/details/119743683

版权

一、什么是bootstrap?

Bootstrap是当下最流行的前端框架（界面工具集）；
移动端优先的设计理念
特点就是灵活简洁，代码优雅，美观大方；
其目的是为了让Web开发更敏捷；
是Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的，并利用业余时间完成第一个版本的开发；

二、为什么使用bootstrap?

生态圈火，不断地更新迭代；
提供一套美观大方地界面组件；
提供一套优雅的HTML+CSS编码规范；
让我们的 Web 开发更简单，更快捷；

注意:使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式。

三、下载Bootstrap

四、引入bootstrap

1.

2.

注意：bootstrap依赖于jquery，引入bootstrap的js的插件前，要引入jquery的js插件

官方文档 - https://getbootstrap.com/

中文文档 - https://v3.bootcss.com/

五、Bootstrap基础模板


<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <!-- 设置当前HTML文件字符编码 -->
    <meta charset="utf-8">
    <!-- 设置浏览器兼容模式版本(让IE使用最新的渲染引擎工作) -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 声明当前网页在移动端浏览器中展示的相关配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 标题 -->
    <title>天亮教育</title>
    <!-- Bootstrap改成本地的 -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim和Respond.js是为了让IE8支持HTML5元素和媒体查询(media queries)功能 -->
    <!-- 警告：通过 file://协议访问页面时 Respond.js 不起作用 -->

<!-- 条件注释：条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉-->
    <!--[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]-->

六、视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
目前大多数手机浏览器的视口（承载页面的容器）宽度都是980
视口的宽度可以通过meta标签设置
此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
1. width:视口的宽度
2. initial-scale：初始化缩放
3. user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
4. minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
5. maximum-scale:最大缩放