最受欢迎的前端框架Bootstrap 入门-变化吧

2020年3月9日21:42:50前端框架评论阅读模式

文中详细介绍了Bootstrap的一些基础款式和部件，包含器皿、页头、新闻媒体部件、照片、目录组。再次保持了以前课的hello.html。人们仍未写CSS文档，仅应用Bootstrap就做到了那样的实际效果，因此讲Bootstrap是一个强大的前端框架！

Bootstrap已经有了较为完整的中文文档。在学习中，你可以参考Bootstrap中文文档，也可以参考一些使用Bootstrap搭建的网站示例。

引入 Bootstrap

Bootstrap通过CSS文件来提供样式，同样在<head>中加以引入：

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

这里引入了cdn.bootcs.com提供了CSS文件，也可以把它下载到本地引用。此后，我们在HTML中通过class来应用Bootstrap提供的样式。

CDN（content delivery network，内容分发网络）是通过互联网连接的网络系统，给用户提供高性能、可扩展、低成本的网络内容。一般网站会把静态内容托管到CDN，减少网站的负载。

容器

Bootstrap 需要为页面内容包裹一个 Bootstrap 容器类，它为页面添加了适当的边距，以及响应式布局的支持。共有两种容器类可用：

.container 类用于固定宽度并支持响应式布局的容器：
```
 <div class="container">
     ... </div>
```
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
```
 <div class="container-fluid">
     ... </div>
```

container和container-fluid这两种容器类不能互相嵌套，如果需要分列可以使用.row和.col-xxx。

容器实例

我们用Bootstrap重新实现上一节的hello.html。首先移除原来的样式文件./hello.css及其引用。

用.container来给页面加合适的边距（代替hello.html中body的padding）：

<html><head>
  <title>Hello, Catty!</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><div class="container">
  <h1>Catie's Homepage</h1>
  <h2 id="subtitle">i am a little, cute catie...</h2>
  <img src="./catty.jpeg" class="avatar">
  <div>
    <p>I like fruits!!!</p>
    <ul>
      <li>Cherry</li>
      <li>Peach</li>
      <li><a href='http://www.baidu.com'>Strawberry</a></li>
    </ul>
  </div></div></body></html>

下图的边缘已经有了一定的边距

拖动窗口使之变大，可以看到边距也会相应增加

页头

Bootstrap 页头组件（.page-header）用来显示一个简易的页头。它会为其中的<h>标签增加适当的空间，并且与页面的其他部分形成一定的分隔。

我们用它来重写标题：

<div class="container">
  <div class="page-header">
    <h1>Catie's Homepage      <small>i am a little, cute catie...</small>
    </h1>
  </div>
  <img src="./catty.jpeg" class="avatar">
  <div>
    <p>I like fruits!!!</p>
    <ul>
      <li>Cherry</li>
      <li>Peach</li>
      <li><a href='http://www.baidu.com'>Strawberry</a></li>
    </ul>
  </div></div>

.page-header还提供了<h>标签内的<small>元素的默认样式。这个<small>通常用来显示副标题。

媒体组件

Bootstrap 媒体组件是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像门户评论或 Twitter 消息等）。

我们重新组织hello.html的内容：

<div class="media">
  <div class="media-left">
    <a><img class="media-object" src="./catty.jpeg"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">I like fruits!!! </h4>  
    <ul>
      <li>Cherry</li>
      <li>Peach</li>
      <li><a href="http://www.baidu.com">Strawberry</a></li>
    </ul>
  </div></div>

得到左侧图片，右侧文字的样式

图片

Bootstrap图片用于显示响应式的图片，添加圆角、环绕等效果。我们来重写媒体组件中的<img>标签：

<img class="media-object img-circle img-thumbnail"
     style="width: 100px;height:100px;max-width:100px;"
     src="./catty.jpeg">

img-circle让图片变成了圆形，而img-thumbnail给图片加了白色圆环

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。我们用它来显示水果列表：

<div class="list-group">
  <a class="list-group-item" href="#">Cherry</a>
  <a class="list-group-item" href="#">Peach</a>
  <a class="list-group-item" href="http://www.baidu.com">Strawberry</a></div>

.list-group还提供了悬停效果

本文来源于：最受欢迎的前端框架Bootstrap 入门-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。