Bootstrap学习 Glyphicons

<span class="glyphicon glyphicon-search"></span>

不得不说够优雅，够内涵。

这个东西是能够通过外围设定的fon-size设定大小的，也就是所谓的矢量图。

另外这个东西后面如果有文本的话，需要在文本前面追加一个空格，来弥补一下padding（内补）。

<button type="button" class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-star"></span> Star

</button>

挺帅的~

Font Awesome 3.0

的使用确实让人感到舒服：

<i class="icon-camera-retro"></i> icon-camera-retro

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>

<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>

<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>

<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

icon-muted

icon-border

icon-spin

Bootstrap学习 Glyphicons

时间： 2024-08-08 22:06:27

Bootstrap学习 Glyphicons的相关文章

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

Bootstrap 学习笔记之表单（4 day）

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单水平表单需要一提的就是表单的状态: 表单控件状态除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

bootstrap学习笔记一： bootstrap初认识，hello bootstrap（下）

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

Bootstrap学习（3）

Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. 请看下面的实例演示: <!DOCTYPE html> <html> <head>

Bootstrap学习下拉列表

如下可能是最简单的下拉列表了: <div class="dropdown"> <button class="btn btn-lg"data-toggle="dropdown"> DropDown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li

Bootstrap学习 Base

Tapestry的学习不得不停一下了.因为Bootstrap再一次引起了我的注意,并且我不得不再系统地学习它一次. 1 bootstrap需要一个HTML5的环境,也就是说必须是: <!DOCTYPE html> <html> ... </html> 2 bootstrap3是移动设备优先的,需要指定一个meta信息,viewport,视角: <meta name="viewport" content="width=device-wi

BootStrap学习之先导篇——响应式网页

Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点:可以自动适配PC.PAD.PHONE浏览器屏幕不足:代码变复杂,需要考虑更多兼容性,并不适合内容非常多网页 2.需要掌握的是viewport的概念早期的网页都是比较大,用于在手机屏幕中浏览,只能进行缩小,导致用户的浏览体验不好.iOS中提出了Viewport(视口)的概念,可以任意的指定大小,