返回

HTML与CSS排版之Bootstrap文字排版与图片样式

前端

HTML与CSS排版之Bootstrap文字排版与图片样式

Bootstrap是一款由Twitter团队开发的前端框架，它为网站提供了许多有用的组件和样式，广泛应用于网站开发中，为前端开发者节省了大量开发时间。本篇文章将介绍如何使用Bootstrap来实现文字排版和图片样式。

1. 文字排版

1.1 字体

Bootstrap提供了多种字体，可以通过以下方式设置：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

1.2 字号

Bootstrap提供了6种字号，可以通过以下方式设置：

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

1.3 行高

Bootstrap提供了3种行高，可以通过以下方式设置：

p {
  line-height: 1.5;
}

small {
  line-height: 1.3;
}

blockquote {
  line-height: 1.8;
}

1.4 颜色

Bootstrap提供了多种颜色，可以通过以下方式设置：

body {
  color: #333;
}

h1 {
  color: #428bca;
}

h2 {
  color: #337ab7;
}

h3 {
  color: #5cb85c;
}

h4 {
  color: #5bc0de;
}

h5 {
  color: #f0ad4e;
}

h6 {
  color: #d9534f;
}

2. 图片样式

2.1 响应式图片

Bootstrap提供了响应式图片类，可以通过以下方式设置：

<img src="image.jpg" class="img-responsive">

2.2 图片边框

Bootstrap提供了图片边框类，可以通过以下方式设置：

<img src="image.jpg" class="img-bordered">

2.3 图片圆角

Bootstrap提供了图片圆角类，可以通过以下方式设置：

<img src="image.jpg" class="img-rounded">

2.4 图片缩略图

Bootstrap提供了图片缩略图类，可以通过以下方式设置：

<img src="image.jpg" class="img-thumbnail">

Bootstrap还提供了许多其他的样式，可以满足各种各样的需求。更多信息，请参考Bootstrap官方文档。