欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Bootstrap 初识

程序员文章站 2022-03-04 17:16:57
...

一、什么是bootstrap?

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

 二、为什么使用bootstrap?

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

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

三、下载Bootstrap

四、引入bootstrap

1.<!-- 引入Bootstrap核心样式文件（必须） -->

  <link rel="stylesheet" href="css/bootstrap.min.css">

2. <!-- 引入所有的Bootstrap的JS插件 -->

  <script src="bootstrap.min.js"></script>

 注意：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/[email protected]/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->


​

六、视口

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

相关标签： 开发语言

上一篇： 2021-10-20

下一篇： 带状疱疹的表现 日常需要怎样护理

推荐阅读