bootstrap 起步

2024年1月4日 230次阅读 来源: 1000copy

bootstrap是Twitter公司出品的css框架，被前端程序员欣赏并广为采用。那么它给web网页带来了什么呢。我们从一个按钮的样式开始。假设如下代码的网页，页面内只有一个按钮：

//vim normal.html
<!DOCTYPE html>
<html >
  <head>
    <title>Bootstrap</title>
  </head>
  <body>
    <button>Hello</button>
  </body>
</html>

当使用浏览器查看时:

open normal.html

网页和按钮的外观是浏览器默认提供的。普通而平凡。

然而，当我们引入bootstrap，同样的按钮看起来就有声有色了。至少相当一部分采用了此框架的人是这样看的。

// bootstrap.html
<!DOCTYPE html>
<html >
  <head>
    <title>Bootstrap</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <button class="btn">Hello</button>
  </body>
</html>

请打开浏览器查看如下的文件：

open bootstrap.html

对比下两个html文件，可以看到，魔术的变化来自于：

  1. 多出来了一个css文件的引入，此文件位于bootstrap的cdn服务器上，这样就暂时不必自己下载bootstrap套件，即可看到效果了。

  2. bootstrap的链接是 https://maxcdn.bootstrapcdn.c…

  3. 对指定的button元素，应用class，值为btn

bootstrap的大部分效果的应用来自于对class属性的操纵。比如我们可以继续把button改造出各种样子来，一时间，百花齐放：

<button class="btn">Hello</button>
<button class="btn btn-primary">Hello</button>
<button class="btn btn-success">Hello</button>
<button class="btn btn-info">Hello</button>
<button class="btn btn-warning">Hello</button>
<button class="btn btn-danger">Hello</button>

我们很多人知道，样式起了作用，秘密在于bootstrap.css文件，但是有了此文件，我们甚至不必深入了解css是什么，以及如何做到这样的效果；而只要修改class属性的值，就可以得到各种为人称道的页面展示了。

实际的效果，可以在此处：https://jsfiddle.net/1000copy… 看到。这个网站可以让我们不必写很多html的head和body标签，并且在一屏内同时编写js、html、css，并展示最终网页的效果。

令人不适的地方

老实说，在button标签的情况下，需要在class内写一遍btn，有点重复。但是你只需要知道class的btn说的是外观这件事，前面标签的button说的是语义。语义和外观的分离也能带来好处的。框架只是简单的修改class来控制外观，而不在乎标签到底是什么。这意味着，你可以把它用到很多标签上，从而控制它的外观。比如

<a class="btn btn-primary">
  button
</a>

<div class="btn btn-primary">
  button
</div>

<label class="btn btn-primary">
  button
</label>
<ul class="btn btn-primary">
  button
</ul>

<ul>
  <li class="btn btn-primary">button</li>
  <li class="btn btn-primary">button</li>
  <li class="btn btn-primary">button</li>
</ul>

只不过，从惯例上来说，我们把a标签、li标签显示成button的样子在不同的场景下会引发困惑，因此不会这样做而已。举出此案例的目的，在于加深class控制外观，标签设置语义的这样的分工的价值和合理性。

另外一个惯例是使用不同的背景色表达不同类型的信息，比如我们看到btn-前缀的一组class，btn-primary、btn-success、btn-info、 btn-warning 、btn-danger这样的惯例也适用于label 、progress-bar、table、list-group、alert等,我们可以看到label的可以class和button的class是对应的。

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

分别设置不同的背景色用来标识信息的类型差异，从而仅仅从信息的背景色上即可一目了然的理解到信息的差异性。

看到了这样的细节，其实是存在一点让人不舒适的地方的。比如

 <span class="label label-success">Default</span>

为什么不能写成：

 <span class="label success">Default</span>

这略微的不适需要适应下，毕竟bootstrap使用起来不过就是改改class就可以得到很棒的效果。

还有更加不爽的地方，比如使用button，考虑到Accessibility（无障碍访问）的需求，可能在bootstrap内看到这样的代码：

<button class="btn" role="button">
</button>

属性role的存在，是为了告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。

bootstrap也提供不少可以交互的用户界面元素，此时除了css文件外，还需要引入它提供的js文件，并且此js文件需要依赖jquery，因此也得引入jquery文件。为了方便，我提供了一个html模板，供实验引用：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <button>Hello</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

参考

https://www.zhihu.com/questio… 黄喜的答案

关于

作者：刘传君
创建过产品，创过业。不好动，读书机器。
可以通过 1000copy#gmail.com 联系到我

出品

http小书 http://www.ituring.com.cn/boo…
Git小书 http://www.ituring.com.cn/boo…

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000006735480
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞