Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件（模态对话框、标签页、滚动条、弹出框等），可满足常用开发 需要，而且还根据需要定制。另外，Bootstrap提供了优雅的HTML和CSS规范，使用者也可以参考学习。本文作者(jawidx)仅在结构层面对 Bootstrap进行介绍。

全局样式

 
  1. 1

    Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<!DOCTYPE html>”

  2. 2

    布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。

  3. 3

    栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

  4. 4

    Bootstrap 排版、链接样式设置了基本的全局样式。

    font-size 设置为 14px，line-height 设置为 1.428。

    <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

    END

基础样式

 

  1. 【排版】，

    1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过<small> 标签或带.small 类的元素标记副标题。

    主体文本：.lead 类让段落突出显示。

    2. 内联文本，使用<mark> 标签表示标注文本，<del>删除，<s>无用，<ins>插入，<u>下划 线，<small>小号（父容器字体大小的 85%），<strong>着重，<em>斜体。

    3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap

    4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize

    5. 缩略语类，为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：<abbr title="attribute" class="initialism">attr</abbr>

    6. 地址，以日常使用的格式呈现，在行结尾加 <br> 保留需要的样式即可。

    7. 引用，将 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，建议用 <p> 标签。

    8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 <dl> 内 的短语及其描述排在一行。

  2. 【代码】

    <code> 标签包裹内联样式的代码片段，

    <kbd> 标签标记用户通过键盘输入的内容，

    <pre> 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。

    <var> 标签标记变量，

    <samp> 标签标记程序输出的内容。

  3. 【表格】

    .table 类指定基本样式，

    .table-striped 条纹样式，

    .table-bordered 类为边框样式，

    .table-hover 类带鼠标悬停样式，

    .table-condensed 类紧凑样式。

    状态类(行或单元格设置颜色)：active，success，info，warning，info。

    将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其

    响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

  4. 【表单】

    1. 基本实例，所有设置了 .form-control 类 的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

    不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

    form-group，input-group，control-group，

    2. 内联表单，<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

    在内联表单中单选/多选框控件的宽度设置为 width: auto;

    如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

    3. 水平排列的表单

    通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）

    4. 多选和单选框

    .radio、.radio-inline、.checkbox、.checkbox-inline 。

    5. 静态控件

    水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static类即可。

    6. 控件状态

    .disabled类禁用控件，为<fieldset> 设置disabled 时则禁用包含的所有控件。

    a标签不受此类影响。

    readonly 属性可以禁止用户输入

    .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

    你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。

    7. 控件尺寸

    通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度

    通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

    用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

    8. 辅助文本

    help-block类，针对表单控件的“块（block）”级辅助文本。

  5. 【按钮】

    1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

    2. 展现形式，btn-link、btn-block、close

    3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。

    可通过 <a>、<button> 或 <input> 元素应用按钮类，但建议用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

  6. 【图片】

    图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。

  7. 【辅助】

    text-muted、text-primary、text-success、text-info、text-warning、text-danger

    bg-primary、bg-success、bg-info、bg-warning、bg-danger、

    三角符号，caret

    浮动

    居中

    组件样式

     

    1. 【图标】

      200个来自 Glyphicon Halflings 的字体图标，

      图标类只能应用在空元素上，且不可与其它组件联合使用。

      <span class="glyphicon glyphicon-search"></span>

    2. 【菜单】

      将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

      菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

      菜单分组：dropdown-header表描述项，.disabled 表禁用项

      向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开

    3. 【按钮组】

      按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。

      按钮栏.btn-toolbar

      钮垂直堆叠排列显示btn-group-vertical

      两端对齐排列的按钮组btn-group-justified

    4. 【导航】

      标签页.nav-tabs 类依赖 .nav 基类。

      胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。

      .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。

      navbar navbar-default

      对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

      将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，

      .navbar-text

      .navbar-link

      .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。

      .navbar-fixed-top 类可以让导航条固定在顶部

      .navbar-fixed-bottom 类可以让导航条固定在底部

      .navbar-static-top 类可让导航条随着页面向下滚动而消失。

      .navbar-inverse 类可以改变导航条的外观。

      breadcrumb 创建带有层次的导航结构（面包屑）。

    5. 【分页】

      pagination，并根据情况对页码使用.disabled 类、 .active 类。

      .pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

      pager上一页和下一页的简单翻页。并可通过previous，next类标示。

    6. 【标签】

      label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。

      badge，可以很醒目的展示新的或未读的信息条目。

    7. 【其它】

      缩略图

      提示框

      进度条

      媒体对象等

      定制样式

       
      1. 1

        BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。

        END

      总结

       
      1. 1

        本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。

        转自:http://jingyan.baidu.com/article/624e7459ad0bed34e8ba5a13.html

Bootstrap基本使用[转]的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. 通过bat命令批量删除VS查找历史记录

    有时候我们会发现我们的VS查找下拉框里面有很多之前的搜索记录,想删除但是却没有地方删除.  网上的方法都是直接找到注册表HKEY_CURRENT_USER\Software\Microsoft\Vis ...

  2. js调用asp.net 后台属性值

    后台代码: public string title = "js调用后台属性值"; public void getContent() { return title; } 前台代码: ...

  3. sublime主题推荐

    PS:之前在CSDN上写的文章,现在转到博客园~ 寒假的时候发现一个sublime主题,我觉得很赞哦~~推荐给大家~~ 下载方式 step1:ctrl+shift+p  调出command palet ...

  4. Win2008 R2 IIS7.5+PHP5(FastCGI)+MySQL5环境搭建教程

    现在很多朋友想尝试win2008 r2来跑web服务器,跟win2003相比界面差别有点大,有些人可能不太习惯,不过以后是趋势啊,这里简单分享下,方便需要的朋友 准备篇 一.环境说明: 操作系统:Wi ...

  5. WPF杂难解 奇怪的DisconnectedItem

    简单场景: 列表绑定后台数据,点击列表项在view的cs中拿点击项的DataContext进一步处理.正常情况下应该是能拿到我绑定上去的数据,但是偶尔会点出来DisconnectedItem,重现几率 ...

  6. 在C#中IEnumerable与IEnumerator

    对于很多刚开始学习C#同学来说经常会遇到IEnumerable这个关键字,enumerate在字典里的解释是列举,枚举,因此可想而知这个关键字肯定是和列举数据有关的操作. public interfa ...

  7. EasyUI portal自定义小图标，不是用js方式加载

    <script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...

  8. Java 中正确使用 hashCode 和 equals 方法

    在这篇文章中,我将告诉大家我对hashCode和equals方法的理解.我将讨论他们的默认实现,以及如何正确的重写他们.我也将使用Apache Commons提供的工具包做一个实现. 目录: hash ...

  9. 判断触摸的点在那个 View上

    UIView *touched = [self.view hitTest:pt withEvent:event]; Uiview *touchView = [pt  view];

  10. UIMenuController搭配UIPasteboard，执行拷贝-黏贴操作－b

    一.基本概念 UIKit框架中,可以直接执行拷贝黏贴操作的有:UITextView.UITextField和UIWebView,其他控件需要实现相关方法. 关于UIPasteboard ·黏贴板是ap ...