BootStrap 教程之布局组件（03）

￡神魔★判官ぃ 2022-09-25 04:22 166阅读 0赞

**布局组件的实现主要是通过 JS 代码实现的。常见的引用文件是：bootstrap.min.css、jquery.min.js 和 bootstrap.min.js。**

**字体图标**，即为胶囊内字段周围的小图标，使用需要下载 Bootstrap 3.x 版本，相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。字体图标可以变换颜色，添加阴影效果。

示例：  
<button type="button" class="btn btn-default btn-lg">  
<span class="glyphicon glyphicon-user"></span> User  
</button>  
完整使用示例：  
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html  
  
**下拉菜单**。可以变换菜单颜色、移动对齐该元素。  
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。  
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu">  
  
**按钮组**。横向、水平按钮组，按钮组合的集合。  
  
**输入框**。带前缀和后缀的输入框，带下拉菜单、按钮的输入框。  
  
**导航元素以及导航栏。**横向纵向导航元素、禁用导航元素、胶囊状导航元素。  
含文本、文本框、按钮、链接、下拉框的导航栏。  
导航栏的颜色、位置（顶部、底部）、随页面滚动导航栏以及面包屑导航栏。  
  
**分页**，分页标签、前向后向按钮。  
  
**标签**，不同颜色和大小的span的设定。  
  
**徽章**，字段后的徽章和字段同一区域的徽章设计。  
  
**超大屏幕（Jumbotron）**。注意 container 和 超大屏幕（Jumbotron）所属 div 之间的相对位置、  
  
**页面标题（Page Header）**。它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），可以把标题放置在带有 class .page-header 的 <div> 中。  
  
**缩略图，**使用 Bootstrap 创建缩略图的步骤如下：1.在图像周围添加带有 class .thumbnail 的 <a> 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。  
有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：  
1.把带有 class .thumbnail 的 <a> 标签改为 <div>。  
2.在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。  
3.如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。  
  
**警告**，颜色可调、是否关闭、搭载链接的设计。  
  
**进度条，**条纹显示、多色显示等。  
  
**多媒体对象（Media Object）**  
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。  
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。  
  
**列表组，**可变色，带徽章。创建一个基本的列表组的步骤如下：  
向元素 <ul> 添加 class .list-group。  
向 <li> 添加 class .list-group-item。  
  
**面板（Panels），**面板组件用于把 DOM 组件插入到一个盒子中。添加面板标题，添加面板脚注，变色面板和带表格面板。  
  
  
**Well** 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。