Web前端 — Bootstrap（1）

2022-04-02 05:11:18

Bootstrap本次知识点：

1.Bootstrap简介

2.什么是Bootstrap

3.为什么使用Bootstrap

4.Bootstrap的结构

5.BootStrap的基本模板

1.Bootstrap简介

Bootstrap,来自Twitter（全国最大的微博）的两名技术工程师研发的一个基于HTML、CSS、JavaScript的开源框架，是目前最受欢迎的前端框架。该框架代码简洁、视觉优美，可用于快速、简单地构建于PC及移动端设备的Web页面需求。

Bootstrap下载及演示：

国内文档翻译官网：http://www.bootcss.com/

瓢城Web俱乐部官网：http://www.ycku.com/

2.什么是Bootstrap

Bootstrap是基于HTML、CSS、JAVASCRIPT的开源前端框架，它简洁、直观、强悍、灵活，使得Web开发更加快捷，用于开发响应式布局、移动设备优先的WEB项目。

3.为什么使用Bootstrap

为什么使用Bootstrap？

（1）跨设备：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

（2）跨浏览器：（chrome、IE9以上、Firefox、Safari、Opera……）所有的主浏览器都支持Bootstrap。

（3）响应式布局：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

（4）具有实用性强的组件：Bootstrap的[HTML组件]和[JS组件]非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础上修改成自己想要的任何样子。这是工作效率的极大提高。

（5）内置jQuery插件：Bootstrap的插件开发模式和javascript的开发模式很相似，先定义一个类，实现主体功能，然后是个Plugin函数，再把这个函数扩展到JQuery上原型上，最后委托的方式给特定元素绑定事件。

（6）删格系统：可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。实现这个功能依赖两个东西，一个是view,另一个是 max-width，min-width。

4.Bootstrap的结构

Bootstrap的结构，主要分为三大核心模块：css（样式）、js（脚本）、 font（字体）。

css（样式）：目录中有四个css后缀的文件，其中包含min字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解css代码的文件；而map后缀的文件则是css源码映射表，在一些特定的浏览器工具中使用。

js（脚本）：目录包含两个文件，是未压缩和压缩的js文件。

font（字体）：目录包含了不同后缀的字体文件。

5.Bootstrap的基本模板

Bootstrap的基本模板，如下代码：

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <h1>hello</h1>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!--bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5-->

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

</body>

</html>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80331937

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！

码农公寓