Bootstrap3组件--2

1. 分页

2. 标签

3. 徽章

4. 巨幕

1. 分页

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <nav>

         //默认分页

         <ul class='pagination'>

             <li><a href='#'><span>&laquo;</span>

             <li class='active'><a href='#'>1</a></li>

             <li><a href='#'>2</a></li>

             <li><a href='#'>3</a></li>

             <li><a href='#'>4</a></li>

             <li><a href='#'><span>&raquo;</span>

         </ul>

         //翻页

         <ul class='pager'>

             <li><a href='#'>Previous</a></li>

             <li><a href='#'>Next</a></li>

         </ul>

         //对齐链接

         <ul class='pager'>

             <li class='previous'><a href='#'><span>&larr;</span> Older</a></li>

             <li class='next'><a href='#'>Newer <span>&rarr;</span></a></li>

         </ul>

     </nav>

 </body>

 </html>

2. 标签

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <span class='label label-default'>Default</span>

     <span class='label label-primary'>Primary</span>

     <span class='label label-success'>Success</span>

     <span class='label label-info'>Info</span>

     <span class='label label-warning'>Warning</span>

     <span class='label label-danger'>Danger</span>

 </body>

 </html>

3. 徽章

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     //给链接、导航等元素嵌套span class='badge'元素，可以很醒目的展示新的或未读的信息条目

     <a href='#'>Inbox <span class='badge'>42</span></a>

     <button class='btn btn-primary'>Messages <span class='badge'>4</span></button>

     <ul class='nav nav-pills'>

         <li class='active'><a href='#'>Home <span class='badge'>42</span></a></li>

         <li><a href='#'>Profile</a></li>

         <li><a href='#'>Messages <span class='badge'>3</span></a></li>

     </ul>

 </body>

 </html>

4. 巨幕

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='jumbotron'>

         <h1>Hello World!</h1>

         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

         <p><a class='btn btn-primary btn-lg' href='#'>Learn more</a></p>

     </div>

 </body>

 </html>

5. 页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='page-header'>

         <h1>Example page header <small>Subtext for header</small></h1>

     </div>

 </body>

 </html>

6. 缩略图

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='row'>

         <div class='col-sm-6 col-md-4'>

             <div class='thumbnail'>

                 <img src='...' alt='...'>

                 <div class='caption'>

                     <h3>Thumbnail label</h3>

                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                     <p><a href='#' class='btn btn-primary'>Button</a><a href='#' class='btn btn-primary'>button</a></p>

                 </div>

             </div>

         </div>

         <div class='col-sm-6 col-md-4'>

             <div class='thumbnail'>

                 <img src='...' alt='...'>

                 <div class='caption'>

                     <h3>Thumbnail label</h3>

                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                     <p><a href='#' class='btn btn-primary'>Button</a><a href='#' class='btn btn-primary'>button</a></p>

                 </div>

             </div>

         </div>

     </div>

 </body>

 </html>

7. 警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='alert alert-success'>Well done! You successfully read this important alert message. </div>

     <div class='alert alert-info'>Well done! You successfully read this important alert message. </div>

     <div class='alert alert-warning'>Well done! You successfully read this important alert message. </div>

     <div class='alert alert-danger'>Well done! You successfully read this important alert message. </div>

     //为警告框添加一个可选的.alert-dismissible 类和一个关闭按钮,务必给 button>元素添加 data-dismiss="alert" 属性。

     <div class='alert alert-warning alert-dismissible'>

         <button class='close' data-dismiss='alert'><span>&times;</span></button>

         <strong>Warning!</strong> Better check yourself, you're not looking too good.

     </div>

 </body>

 </html>

8. 进度条

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='progress'>

         <div class='progress-bar' style='width: 60%;'>

             <span class='sr-only'>60% Complete</span>

         </div>

     </div>

     //将设置了 .sr-only 类的span标签从进度条组件中移除 类，从而让当前进度显示出来

     <div class='progress'>

         <div class='progress-bar' style='width: 60%;'>

             60%

         </div>

     </div>

 </body>

 </html>

9. 列表组

列表组中的每个元素都可以是任何 HTML 内容，如列表、徽章、链接、按钮，甚至是像下面的带链接的列表组。

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='list-group'>

         <li class='list-group-item'>Cras justo odio</li>

         <li class='list-group-item'>Dapibus ac facilisis in</li>

         <li class='list-group-item'>Morbi leo risus</li>

     </div>

     //给列表组加入徽章组件，它会自动被放在右边

     <div class='list-group'>

         <li class='list-group-item'>

             <span class='badge'>14</span>

             Cras justo odio

         </li>

     </div>

     <div class='list-group'>

         <a href='#' class='list-group-item active'>

             <h4 class='list-group-item-heading'>List group item heading</h4>

             <p class='list-group-item-text'>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>

         </a>

         <a href='#' class='list-group-item'>

             <h4 class='list-group-item-heading'>List group item heading</h4>

             <p class='list-group-item-text'>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>

         </a>

     </div>

 </body>

 </html>

10. 面板

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='panel panel-primary'>

         <div class='panel-heading'>

             <h3 class='panel-title'>Panel title</h3>

         </div>

         <div class='panel-body'>

             Panel Content

         </div>

         <div class='panel-footer'>Panel footer</div>

     </div>

 </body>

 </html>

11. Well

把 Well 用在元素上，能有嵌入（inset）的的简单效果。

 <!doctype html>

 <html lang='zh-cn'>

 <head>

     <title>Hello World!</title>

     <link rel='stylesheet' href='css/bootstrap.min.css'>

     <script src='js/jquery2.min.js'></script>

     <script src='js/bootstrap.min.js'></script>

 </head>

 <body>

     <div class='well'>Hello world</div>

     <div class='well well-lg'>Hello world</div>

     <div class='well well-sm'>Hello world</div>

 </body>

 </html>

Bootstrap3组件--2的更多相关文章

Bootstrap3组件--1
目录 1. Glyphicons字体图标 2.下拉菜单 3.按钮组 4. 输入框组 5.导航 6. 导航条 7. 路径导航 1. Glyphicons字体图标出于性能的考虑,所有图标都需要一个基类 ...
看过的bootstrap书籍（附下载地址）
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
Bootstrap3写的红色警告框样式组件
用的是BT3的类和fa的图标 <!DOCTYPE html><html><head lang="en"> <meta charset ...
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式
1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet' href='bootstrap-3.3.0-dist/dist/css ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
React+BootStrap+ASP.NET MVC实现自适应和组件的复用
系统展示如下 1.前端采用bootstrap3进行架构 2.后端采用asp.net mvc进行开发开发工具vs2010 mvc4需要安装sp1的补丁. 3.js组件的封装采用react 1.新建mv ...

随机推荐

c/c++基本数据类型大小
各个类型的变量长度由编译器来决定(实际上与操作系统位数和编译器都有关)使用时可用sizeof()得到,当前主流编译器一般是32位或64位. 类型 32位 64位 char 1 1 short int ...
sz与rz
yum安装root 账号登陆后执行以下命令:yum install -y lrzsz使用说明sz命令发送文件到本地:# sz filenamerz命令本地上传文件到服务器:# rz https://w ...
iptables 概念 1
[ 实战笔记 -- iptables 概念 1 ] 一. 防火墙相关概念 # 从逻辑上讲,防火墙可以分为主机防火墙和网络防火墙. 1> 主机防火墙: 针对于单个主机进行防护 2> 网络防火 ...
李飞飞、吴恩达、Bengio等人的15大顶级深度学习课程
目前,深度学习和深度强化学习已经在实践中得到了广泛的运用.资源型博客sky2learn整理了15个深度学习和深入强化学习相关的在线课程,其中包括它们在自然语言处理(NLP),计算机视觉和控制系统中的应 ...
C++STL容器（lower_bound，upper_bound）
C++STL容器中有三种二分查找函数,这里分享其中的两个这两个函数其实都可以理解为不破坏数组次序的前期下能将目标元素插入到数组的第几个位置,不过在细节上两个函数有所差异 int d[6]={0,2, ...
COGS 693. [SDOI2005]Antiprime数唯一分解定理逆用
693. Antiprime数 ★★ 输入文件:antip.in 输出文件:antip.out 简单对比时间限制:1 s 内存限制:128 MB 如果一个自然数n(n>=1), ...
JavaScript基础深入之
JS的数值类型是分为两类:基本数据类型和引用数据类型. 基本类型占据的内存栈空间,引用类型被保存在堆空间.引用类型赋值的变量也是被保存在栈空间的,它的作用类似于电视遥控器,负责操作堆空间内指向的对象. ...
python系列八：Python3条件控制&循环语句
#!/usr/bin/python #-*-coding:gbk-*-#Python3 条件控制&循环语句import randomage = int(input("请输入你的年龄: ...
任务03—简单程序测试及 GitHub Issues 的使用
任务三主要是测试别人的代码找bug,和根据别人提出的bug修改自己的代码. 首先是测试的对象是jinlinchao的代码,根据他的代码很容易发现几个问题,一开始,我是打算,将发现的问题一个一个提上去, ...
Asp.Net MVC anti-forgery token的问题：nameidentifier or identityprovider not present
当使用ClaimsIdentity的时候,Asp.Net MVC在生成AntiForgeryToken的时候会默认使用User.Identity中两种ClaimsType的值:NameIdentifi ...

Bootstrap3组件--2

Bootstrap3组件--2的更多相关文章

随机推荐

热门专题