随笔分类 - Bootstrap历练讲解
目前最受欢迎的前端框架
摘要：本章将讲解Bootstrap的一个特性：超大屏幕(Jumbonron),顾名思义该组件可以增加标题的大小，并为登录页面的内容添加更多的外边矩。使用超大屏幕的步骤如下：1、创建一个还有class.jumbonron类的div2、除了更大的 ，字体粗细font-weight被减为 200px。实例： ...
阅读全文
摘要：激活导航状态您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用来激活链接，如下面的实例所示： Bootstrap历练实例：激活导航的状态 Html556 Css3 Bootstr...
阅读全文
摘要：本章将讲解Bootstrap徽章(Badges),徽章与标签相似，主要的区别是徽章的圆角比较圆滑。徽章(Badges)主要用于突出显示新的或未读的项，如果使用徽章，只需要把添加到链接，bootstrap导航等这些元素上即可。
阅读全文
摘要：本章将讲解bootstrap标签，标签可用于计数，提示和页面上其它的标记显示。使用class.laber来显示标签，如下面的实例所示 Bootstrap历练实例：标签(label) This Is Heading:Label This Is...
阅读全文
摘要：翻页的状态下面的实例演示了上表中所讨论的 class.disabled的用法： bootstrap 翻页的状态 ←Older Newer→
阅读全文
摘要：如果您想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。与分布链接一样，也是一个无序列表。默认情况下，翻页是居中显示的。下面列出了bootstrap处理翻页的类。Class描述示例代码.pager添加该 class 来获得翻页链接。 Previous Next.previous, ....
阅读全文
摘要：本章将讲解Bootsrtap支持分页的特性，分页(pagination),是一种无序列表，bootstrap像处理其它界面元素一样处理分布。分页（Pagination）下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页...
阅读全文
摘要：Bootstrap面包屑导航是一种基于网站层次信息显示的方式。以博客为例，面包屑导航可以显示发布日期，类别或标签，它们表示当前页面在导航层次结构内的位置。Bootstrap面包屑导航其实是一个简单的class.breadcrums类的无序列表，其分隔由bootstrap.min.css提供自动添加。...
阅读全文
摘要：Bootstrap历练实例：导航中的表单，它是使用class.navbar-form类，这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为，使用这个对齐方式选项来决定导航栏中的内容放置在哪里。实例： Bootstrap历练实例：导航中的表单 ...
阅读全文
摘要：响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes.collapse、.navbar-collapse的 中。折叠起来的导航栏实际上是一个带有 class.navbar-toggle及两个 data- 元素的按钮。第一个是data-toggle，用于告诉 Jav...
阅读全文
摘要：导航栏是一个很好的功能，是bootstrap网站一个突出的特点，导航栏在您的应用或网站中作为导航页头的响应式基础组件，导航栏在移动设备中的视图是堆叠的，随着可视窗口的宽度增大，导航栏也会随之水平展开。默认的导航栏创建一个默认的导航栏步骤如下：1、向nav标签添加class.navbar,.navba...
阅读全文
摘要：对每个.navclass，如果添加了.disabledclass，则会创建一个灰色的链接，同时禁用了该链接的:hover状态， bootstrap历练实例： 导航元素中禁用的链接 Html5 Css3 ...
阅读全文
摘要：您可以在屏幕宽度大于768px时，通过在分别使用.nav .nav-tabs或.nav .nav-pills的同时使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽，在更小的屏幕上，导航链接会堆叠。实例： bootstrap历练实例： 两端对齐的导航菜单 ...
阅读全文
摘要：本章将讲解bootstrap提供的用于定义导航元素的一些选项，它使用相同的标签和基类.nav。Bootsrtap也提供了一个用于共享标记和状态的帮助器类。改变修饰的class,可以在不同的样式间进行切换。表格导航或标签创建一个标签式的导航菜单1、以一个带有class.nav类无序列表开始。2、添加c...
阅读全文
摘要：您可以在一个按钮组内嵌套另一个按钮组，即，在一个.btn-group内嵌套另一个.btn-group。当您想让下拉菜单与一系列按钮组合使用时，就会用到这个。实例： Bootstrap历练实例：嵌套的按钮组 按钮1 ...
阅读全文
摘要：按钮组允许多个按钮被堆叠在同一行上，当您想要把按钮对齐在一起时，使用按钮组就显得非常有用了。下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：Class描述代码示例.btn-group该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 clas...
阅读全文
摘要：本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 Bootstrap历练实例：下拉菜单 选择课程 ...
阅读全文
摘要：本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用性，bootstrap捆绑了200多种字体格式的字形，首先让我们来理解一下什么是字体图标。什么字体图标？字体图标就是在web项目中使用的图标字体太多了，后续完成。
阅读全文
摘要：Bootstrap图片 图片 .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):
阅读全文
摘要：Bootstrap提供了三种简单的图片样式。 Bootstrap图片 图片 .img-thumbnail 类可制作图片缩略图: .img-circle 类将图片变为圆形 (IE8 ...
阅读全文