Bootstrap字体图标，下拉菜单，按钮组，按钮下拉菜单

字体图标

字体图标是在 Web 项目中使用的图标字，Glyphicons Halflings 需要商业许可，但是通过基于项目的 Bootstrap 可以免费使用这些图标
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上
CSS规则解析

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
 
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置
.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
示例




    
    Bootstrap 实例 - 如何使用字形图标（Glyphicons）

示例

示例

通过改变字体的尺寸，颜色，阴影来制定图标
Bootstrap字体图标示例

图标示例

图标示例

图标示例

图标示例

下拉菜单

实例

示例

右对齐示例

标题示例

按钮组

按钮组允许多个按钮被堆叠在同一行上
class：.btn-group
描述：用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

示例

示例代码：

class：.btn-toolbar
描述：有助于把几组

结合到一个

中，一般获得更复杂的组件。

示例

示例代码：


  ...
  ...

class：.btn-group-lg, .btn-group-sm, .btn-group-xs
描述：可应用到整个按钮组的大小调整，不需要对每个按钮进行大小调整。

示例

示例代码：

class：.btn-group-vertical
描述：让一组按钮垂直堆叠显示

示例

示例代码：

嵌套
在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。写下拉菜单与一系列按钮组合使用时，就会用到这个。

示例

示例代码

按钮下拉菜单

示例

分割的按钮下拉菜单

示例

按钮下拉菜单的大小

示例

按钮上拉菜单

示例

Bootstrap字体图标，下拉菜单，按钮组，按钮下拉菜单

字体图标

下拉菜单

按钮组

按钮下拉菜单

你可能感兴趣的:(Bootstrap字体图标，下拉菜单，按钮组，按钮下拉菜单)