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

来源：互联网发布：知之阅读安卓编辑：程序博客网时间：2024/06/14 18:50

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

阅读全文

0 0