在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式:

导航框

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

  样式:

          

禁用&激活链接:

<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li><!-class="disabled" 便可以禁用链接->
 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><!-class="active"便可以链接->
 ... 
</ul>

下拉菜单

<div class="dropdown">
<button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

默认分页:

  

<ul class="pagination">
<li><a href="#">«</a></li>
<li><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="#">5</a></li>
<li><a href="#">»</a></li>
</ul>

  样式:

                            

进度条:

  

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>

  样式:

                   

  

定制内容

在里面可以加几乎任何HTML,甚至是像下面的带链接的列表组。

  

<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">...</p>
</a>
</div>

  样式:

        

这些为在bootstrap中较为常用的,还有更多的css样式这里就没一一列举了;要这些样式只需要直接复制这些代码就可以了,要改变其中的一些细节样式可以改变其中的class;

Bootstrap 基本用法(续)的更多相关文章

  1. bootstrap基本用法

    进入中文官网:http://www.bootcss.com   开始第一个Demo   准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境         下载好的文件是一 ...

  2. Bootstrap 基本用法

    使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href=& ...

  3. 谈谈Ext JS的组件——布局的用法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...

  4. 【Bootstrap简单用法】

    一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...

  5. 谈谈Ext JS的组件——布局的用法续一

    盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比較常有的布局方式. 使用 ...

  6. bootStrap @media 用法

    一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) ...

  7. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  8. bootstrap data

    bootstrap data 用法 <div data-role="page" data-last-value="43" data-hidden=&quo ...

  9. 【转】bootstrap 的 affix.js 插件

    我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...

随机推荐

  1. PostQuitMessage, PostThreadMessage( WM_QUIT )

    http://blogs.msdn.com/b/oldnewthing/archive/2005/11/04/489028.aspx Why is there a special PostQuitMe ...

  2. Windows Server Backup 2008 R2 备份Hyper-V

    要备份 Hyper-V 虚拟机从父分区在 Windows Server 2008 上使用 Windows 服务器备份,您必须注册 Microsoft Hyper-V VSS 编写器 Windows 服 ...

  3. iOS开发——UI篇Swift篇&UIActivityIndicatorView

    UIActivityIndicatorView override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleStr ...

  4. mysql常用知识点

    --存储过程及常用流程控制语法 /*该代码是创建了一个名叫"p4"的存储过程并设置了s1,s2,s3两个int型一个varchar型参数,还可以是其他数据类型,内部创建了x1,x2 ...

  5. MVC4数据注释与验证

    Using Validation Annotations Required必须项验证属性 [Required] public string FirstName { get; set; } [Requi ...

  6. 判断浏览器是否IE10

    项目中做打印预览时,在IE10中出现兼容性问题,需要针对IE10做特殊处理. 在网上搜了一下,有三种方法可以实现 一.特性检测:@cc_on <!--[if !IE]><!--> ...

  7. 云服务器 ECS Linux IO 占用高问题排查方法

    https://help.aliyun.com/knowledge_detail/41224.html?spm=5176.7841174.2.19.uqC1as#使用 iostat 从系统纬度查看磁盘 ...

  8. arm linux kernel 从入口到start_kernel 的代码分析

    参考资料: <ARM体系结构与编程> <嵌入式Linux应用开发完全手册> Linux_Memory_Address_Mapping http://www.chinaunix. ...

  9. 如何简单便捷的搭建一个网站 - 基于Django

    一.所需工具以及相关环境 1. 系统:win7,win8.1,win10(亲测可用 - 本文为win7,64位) 2. 本文使用的版本是: 1)python-2.7.11[百度云盘分享:http:// ...

  10. jquery . fancybox()

    1.父页面 function chooseTopic(btn) {//选择议题 $.fancybox({ type : 'iframe', href : '', fitToView : false, ...