本文共 1998 字,大约阅读时间需要 6 分钟。
由发表在
来自 Twitter,是目前最受欢迎的前端框架之一。Bootstrap 提供了一套HTML基础样式、一套观感一致的组件、以及一系列的javascript插件。通过引入Bootstrap的样式文件,可以更快捷地开发web页面。
本文介绍了Bootstrap的一些基本样式和组件,包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html
。我们并未写CSS文件,仅使用Bootstrap就达到了这样的效果,所以讲Bootstrap是一个强大的前端框架!
Bootstrap已经有了较为完整的中文文档。在学习中,你可以参考,也可以参考一些使用Bootstrap搭建的。
Bootstrap通过CSS文件来提供样式,同样在<head>
中加以引入:
这里引入了cdn.bootcs.com
提供了CSS文件,也可以把它下载到本地引用。此后,我们在HTML中通过class
来应用Bootstrap提供的样式。
(content delivery network,内容分发网络)是通过互联网连接的网络系统,给用户提供高性能、可扩展、低成本的网络内容。一般网站会把静态内容托管到CDN,减少网站的负载。
Bootstrap 需要为页面内容包裹一个 Bootstrap 容器类,它为页面添加了适当的边距,以及的支持。共有两种容器类可用:
.container
类用于固定宽度并支持响应式布局的容器:
...
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
...
container
和container-fluid
这两种容器类不能互相嵌套,如果需要分列可以使用.row
和.col-xxx
。
我们用Bootstrap重新实现上一节的hello.html
。首先移除原来的样式文件./hello.css
及其引用。
用.container
来给页面加合适的边距(代替hello.html
中body
的padding
):
Hello, Catty!
下图的边缘已经有了一定的边距:
拖动窗口使之变大,可以看到边距也会相应增加:
Bootstrap (.page-header
)用来显示一个简易的页头。它会为其中的<h>
标签增加适当的空间,并且与页面的其他部分形成一定的分隔。
我们用它来重写标题:
Catie's Homepage i am a little, cute catie...
I like fruits!!!
- Cherry
- Peach
- Strawberry
.page-header
还提供了<h>
标签内的<small>
元素的默认样式。这个<small>
通常用来显示副标题。注意标题右侧的浅色文字:
Bootstrap 是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。
我们重新组织hello.html
的内容:
I like fruits!!!
- Cherry
- Peach
- Strawberry
得到左侧图片,右侧文字的样式:
Bootstrap用于显示响应式的图片,添加圆角、环绕等效果。我们来重写媒体组件中的<img>
标签:
img-circle
让图片变成了圆形,而img-thumbnail
给图片加了白色圆环:
是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。我们用它来显示水果列表:
.list-group
还提供了悬停效果:
更多文章请访问