随笔- 63
文章- 0
评论- 76
阅读-
18万
04 2015 档案
Bootstrap<基础二十四> 缩略图
摘要:Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:在图像周围添加带有 class.thumbnail的 标签。这会添加四个像素的内边距(padding)和一个灰色的边框...
阅读全文
Bootstrap <基础二十三>页面标题(Page Header)
摘要:页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把你的标题放置在带有 class.page-header的 中: Boot...
阅读全文
Bootstrap <基础二十二>超大屏幕(Jumbotron)
摘要:Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:创建一个带有 class.jumbotron. 的容器 。除了更大的 ,字体粗细font-weigh...
阅读全文
Bootstrap <基础二十一>徽章(Badges)
摘要:Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把添加到链接、Bootstrap 导航等这些元素上即可。下面的实例演示了这点: Bootstrap 实例 - 徽章(Badges) ...
阅读全文
Bootstrap<基础二十> 标签
摘要:Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class.label来显示标签,如下面的实例所示: Bootstrap 实例 - 标签 Example Heading LabelExample Heading LabelExample Heading...
阅读全文
Bootstrap <基础十九>分页
摘要:Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。分页(Pagination)下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页面上显...
阅读全文
Bootstrap <基础十八>面包屑导航(Breadcrumbs)
摘要:面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有.breadcrumbclass 的无序列表。分隔符会通过 C...
阅读全文
Bootstrap<基础十七>导航栏
摘要:导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。默认的导航栏创建一...
阅读全文
Bootstrap<基础十六> 导航元素
摘要:Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。表格导航或标签创建一个标签式的导航菜单:以一个带有 class.nav的无序列表开始。添加 cla...
阅读全文
Bootstrap<基础十五> 输入框组
摘要:Bootstrap 支持的另一个特性,输入框组。输入框组扩展自表单控件。使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需...
阅读全文
Bootstrap<基础十四> 按钮下拉菜单
摘要:使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。也可以使用 来指示按钮作为下拉菜单。下面的实例演示了一个基本的简单的按钮下拉菜单: Bootstrap 实例 - 基本的按钮下拉菜单 ...
阅读全文
Bootstrap<基础十三> 按钮组
摘要:按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。你可以通过Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为。下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:Class描述代码示例....
阅读全文
Bootstrap <基础十二>下拉菜单(Dropdowns)
摘要:Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现。如需使用下列菜单,只需要在 class.dropdown内加上下拉菜单即可。下面的实例演示了基本的下拉菜单: Bootstrap ...
阅读全文
Bootstrap<基础十一>字体图标(Glyphicons)
摘要:字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。获取字体图标我们已经在环境安装章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在fonts文件夹内可以找到字体图标,它包含了下列这些文件:glyphicons-h...
阅读全文
Bootstrap<基础十> 响应式实用工具
摘要:Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。超小屏幕手机 ( 相关的元素的特殊情况外,它们与 .vi...
阅读全文
Bootstrap<基础九>辅助类
摘要:Bootstrap 中的一些可能会派上用场的辅助类。文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:类描述.text-muted"text-muted" 类的文本样式.text-primary"text-primary" 类的文本样式.text-success"text...
阅读全文