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

浅谈Bootstrap学习第一章（介绍）

程序员文章站 2022-05-27 14:15:54
一．Bootstrap 概述Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。2010 年 6 月，Twitt ......

一．bootstrap 概述
bootstrap 是由 twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于
html、css、javascript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地
构建基于 pc 及移动端设备的 web 页面需求。
2010 年 6 月，twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历
各种方案后，bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升
级，由最初的 css 驱动项目发展成为内置很多 javascript 插件和图标的多功能 web 前端
的开源框架。
bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 pc 端、pad
以及手机移动端的页面访问。
bootstrap 下载及演示：
国内文档翻译官网：http://www.bootcss.com

二．bootstrap 特点
bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的 ie7、8。当然，本课程不再考虑 ie9 以下
浏览器。
(2).响应式布局
不但可以支持 pc 端的各种分辨率的显示，还支持移动端 pad、手机等屏幕的响应式切
换显示。
(3).提供的全面的组件
bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组
件，方便开发者调用。
(4).内置 jquery 插件
bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 web 中各种
常规特效。
(5).支持 html5、css3
html5 语义化标签和 css3 属性，都得到很好的支持。
(6).支持 less 动态样式
less 使用变量、嵌套、操作混合编码，编写更快、更灵活的 css。它和 bootstrap 能
很好的配合开发。

三．bootstrap  结构

首先，想要了解 boostrap 的文档结构，需要在官网先把它下载到本地。bootstrap
下载地址如下：
bootstrap 下载地址：http://v3.bootcss.com/ (选择生产环境即可，v3.3.4)
解压后，目录呈现这样的结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用
这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是
css 源码映射表，在一些特定的浏览器工具中使用。
2.js 目录包含两个文件，是未压缩和压缩的 js 文件。
3.fonts 目录包含了不同后缀的字体文件。

创建第一个bootstrap页面

<!--
    作者：simplewu
    时间：2018-09-17
    描述：bootstrap之初体验
-->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bootstrap初体验</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <button class="btn btn-default">bootstrap初体验之按钮</button>
    </body>
</html>

bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

 

上一篇： 要霸榜DxO？华为P30/P30 Pro渲染图曝光：3月26日发布

下一篇： Vue动态路由缓存不相互影响的解决办法

推荐阅读