什么是Bootstrap和Bootstrap的应用？

最新推荐文章于 2022-12-28 17:39:14 发布

weixin_40442639

最新推荐文章于 2022-12-28 17:39:14 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/weixin_40442639/article/details/105191879

版权

什么是Bootstrap

？**
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。简单的来说，他是一款运行在浏览器的插件。

Bootstrap的组成

**
bootstrap大致的组成可分为三部分：Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件。
Bootstrap CSS：
Bootstrap 使用了一些 HTML5 元素和 CSS 属性Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型（Doctype）为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。
Bootstrap 布局组件：
Bootstrap 捆绑了 200 多种字体格式的字形，简单来说就是他可以创建各种字形图标。

Bootstrap 插件：
Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。

顺便提一下，只要具备HTML和CSS的基础知识就可以学习Bootstrap 。

Bootstrap 的优点也是它的应用场景

：**
1.移动设备优先移动设备优先
所谓的移动设备优先，是指优先支持小型移动设备例如手机，平板之类的设备。当然这是在Bootstrap 3出现之后。在Bootstrap 3之前需要手动引用一个CSS文件，才能让整个项目友好的支持移动设备。
Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

2.响应式图像
伴随屏幕的大小及时的响应布局
它是通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

3.全局显示、排版和链接全局显示、排版和链接
基本的全局显示：Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。
相关规则：
第一条规则设置 body 的默认字体样式为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
第二条规则设置文本的默认字体大小为 14 像素。
第三条规则设置默认的行高度为 1.428571429。
第四条规则设置默认的文本颜色为 #333333。
最后一条规则设置默认的背景颜色为白色。

排版：使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
链接样式：通过属性 @link-color 设置全局链接的颜色。

4.避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

5.Bootstrap 浏览器/设备支持
在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap简单案例</title>
    <!-- 这是一个在线的bootstrap CSS JS 文件 里面封装很多实用功能  可以拿过来直接用 -->
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
        <a class="navbar-brand" href="#">自强学堂</a>
        </div>
        <div>
        <ul class="nav navbar-nav">
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">SVN</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Java
        <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
        <li><a href="#">jmeter</a></li>
        <li><a href="#">EJB</a></li>
        <li><a href="#">Jasper Report</a></li>
        <li class="divider">
        <li><a href="#">分离的链接</a></li>
        <li class="divider">
        <li><a href="#">另一个分离的链接</a></li>
        </ul>
        </li>
        </ul>
        </div>
        </nav>
</body>
</html>

这个案例有很典型的响应示特征，我们来看看运行的效果

PC模式下的布局：

在这里插入图片描述
手机模式下的布局

这样我们就能很直观的看到了Bootstrap 给我们页面布局带来的便利。我们我们可以看到几乎没有写任何的CSS和JS代码，但是一个响应式的导航栏就这样轻松的实现了。