【Bootstrap框架】——起步（Startup）

最新推荐文章于 2025-06-06 09:02:55 发布

ruirui_1996

最新推荐文章于 2025-06-06 09:02:55 发布

阅读量962

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-Bootstrap

本文链接：https://blog.youkuaiyun.com/ruirui_1996/article/details/78056091

前端-Bootstrap 专栏收录该内容

4 篇文章

订阅专栏

Bootstrap是Twitter创建的流行前端框架，简化响应式网页设计。包括起步、全局样式、组件、插件和定制5个部分。HTML扩展了data属性，CSS包含CSS Reset和大量class，JS基于jQuery提供插件。Bootlint是官方推荐的HTML检测工具，帮助确保Bootstrap组件的正确结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap来自 Twitter，是目前很受欢迎的前端框架。是一个HTML/CSS/JS框架。极大的简化了响应式网页的开发。
学习特点：概念简单，易上手；但涉及到很多的英文单词。
分为5个部分：起步、全局CSS样式、组件、插件、定制

HTML：为H5已有的标签扩展了若干个自定义属性，以data开头
CSS：CSS Reset（重置CSS的默认样式）、近千个class
JS：基于jQuery添加了十几个插件函数

基本模板

基本模板加注释：

<!DOCTYPE html>
<html lang="zh-CN">
<!--zh-CN简体中文的两个目的：
为浏览器翻译应用指明原始的语言；
为屏幕阅读软件指定网页的基础发音。-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--X-UA-Compatible元标签的含义：
    IE浏览器专用，其他浏览器忽略
        X：Cross 跨越
        UA：UserAgent 用户代理，即浏览器
        Compatible：兼容性
        edge：边沿、最前端
    IE7同时兼容IE6，以此类推，所以在新版本的IE种如何启用老IE的内核，加这句话。-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--不允许用户缩放代码：user-scalable=no-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--如果浏览器是IE9以下，引用下面两个js文件-->
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <!--有第三方开发的一个js自调函数，让老版本（<9）的ie支持html5的标签-->
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!--有第三方开发的一个js自调函数，让老版本（<9）的ie支持响应式网页的必备技术，即CSS3MediaQuery-->
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--引用jQuery-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--bootstrap的js-->
</body>
</html>

Bootlint工具

Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。

使用方法

<script type="text/javascript">
    (function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";
        document.body.appendChild(s)
    })();
</script>

详情参考：https://github.com/twbs/bootlint