向上弹起 11111112222222

向上弹起

 

 

输入框组

只需要在容器上应用.input-group样式，然后对需要在input前后显示的个性元素上应用.input-group-addon样式。

在.input-group-addon样式里，不仅可以放置label和icon，也可以放置复选框（checkbox）和单选框（radio）。

支持lg，sm尺寸样式。

按钮作为addon，由于btn样式本身就有大小颜色内外边距样式。.btn样式又单独设置了一 个.input-group-btn样式

扩展:

 

导航

设置容器样式，即可实现不同的导航效果

选项卡导航是最常用的一种导航方式，尤其是在多内容编辑的时候，需要通过选项卡进行分组显示

选项卡导航：nav nav-tabs

胶囊式导航：nav nav-pills

垂直导航： nav nav-pills nav-stacked　　(nav-tabs垂直导航效果老版本v2.x系列可以，3.x新版本不可以)

自适应导航：nav nav-pills nav-justified　　nav nav-tabs nav-justified

 

导航条

基础导航条是在普通导航的基础上进行改进实现的，但实现原理复杂得多

首先在普通导航的 ul元素上应用.navbar-nav样式，然后在外部父元素容器上应用.navbar样式以及.navbar-default样式即可实现。

navbar-brand样式的链接，表示该元素是导航条的名称，起到提醒的目的

基础导航条

Never、CHomeCenter111111112222222211111111About

基础导航条

 

导航条中的表单navbar-form

Never、CSubmitHomeAbout

本质navbar-form设置为inline-block效果，pull-left左浮动效果。

 

固定

提供了两个强有力的样式支持这一特性，分别是：.navbar-fixed-top支持最顶部固定，.navbar-fixedbottom支持最底部固定。

 

响应式导航条

屏幕大小的分界点是768像素， 在小于768像素的时候，所有的菜单默认会隐藏，单击右边的icon图标，所有默认的菜单就会展示出来

使用

右上角的button图标（icon）必须包含在.navbar-toggle样式 里

默认隐藏收缩的代码都 在一个样式为.navbar-responsive-collapse的div里，并且该div应用了navbar-collapse和collapse两个样式。

Toggle navigationBrand主页作品图书下拉菜单 子菜单1子菜单2

响应式导航条

 

面包屑导航

面包屑（Breadcrumb）一般用于导航，表示当前页面所在的位置（或功能插件）。

在容器上（一般为ul）添加breadcrumb类即可。

 

分页导航

一个用户体验良好的分页组件会得到访问用户的良好评价。bs为大家提供了两种分页组件，一种是带多个页码的组件（pagination），一种是只有上一页、下一页的翻页组件 （pager）。

实际上pager加了居中效果，pagination实现类似btn-group效果

 

标签

在网页排版的时候，我们经常要高亮一些标题里的特殊字符或者整个字符， bs供了一个.label样式用于实现高亮的功能。

label支持5种基本颜色和1个默认灰。

<span>info</span>

 

徽标

在开发交互式系统或者信息系统时，经常要显示一些最新收到的消息、需要有多少审批的消息等。Bootstrap的.badge样式提 供了很好的效果，只需要在span或者label上应用该样式即可

.badge样式有个遗憾就是，它没有定义多风格颜色的设定。

使用以下扩展样式，即可实现4种基本颜色

.badge-danger { background-color: #d9534f; } .badge-success { background-color: #5cb85c; } .badge-warning { background-color: #f0ad4e; } .badge-info { background-color: #5bc0de; }

badge color

 

大屏

在设计网页布局的时候，经常会有一些大屏（或大块头）内容的显示，.jumbotron样式提供的展示效果正是我们所需要的。

在.jumbotron内部应用h1和p元素时，这两种元素也会进行相应的调整。

如果jumbotron放在container样式内，则显示圆角；如果不放在里面，就不会显示圆角。而一般我们会在大屏里面套一个容器。

<div> <div> <h1>Hello World</h1> <p>.Net ......</p> <p><a href="#">Learn</a> </p> </div> </div>

　　

 

缩略图

结合12栅格系统，并使用.thumbnail样式，可以将图像、视频、文本展示得更加漂亮。

缩略图有两种使用方式，一种 用于仅显示图片，另外一种利用容器将图片和标题显示在一起。

可以在.caption样式的元素容器内，添加任意风格的元素，比如按钮、链接等。本质加了个padding和color。

将以下内容放置一个row中，则会在大屏下一行显示3个，中屏显示2个，小屏显示1个

<div> <div> <img src="url" alt="Alternate Text" /> <div> <h4>MicroSoft</h4> <p>MicroSoft ....</p> <p> <a>Up</a> <a>Down</a> </p> </div> </div> </div>

　　

 

 

警告框

在交互式网页中，经常要根据用户操作的上下文为用户提供 灵活的提示消息，比如操作成功、警告提示、错误信息。