bootstarp

Posted naniandiam

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstarp相关的知识,希望对你有一定的参考价值。

什么是Bootstrap?

bootstrap是一个最受欢迎的 html、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。通俗的讲,bootstrap就是预先定义好了一套优美的CSS样式和一套组件,前端开发者可以直接拿来使用,加速开发效率,并且他是响应式布局的,所以写的一套代码可以在多种设备中进行使用。

如何使用bootstrap?

要使用bootstrap很简单,只要下载源代码,然后把bootstrap.min.css和bootstrap.min.js以及jquery.min.js导入到html文件中即可使用。或者是使用bootcss网站提供的CDN加速服务,把链接导入到HTML文件中即可,要注意的事情是,jquery必须放在bootstrap.min.js之前,因为bootstrap.min.js依赖jquery,那么以下将使用CDN的方式展示样例代码:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 javascript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

bootstrap中的栅格系统:

bootstrap中最强大也是最核心的一个东西就是响应式,而响应式是通过一个叫做栅格系统的东西实现的。栅格系统把一个页面分成12列,bootstrap会根据媒体查询获取当前的浏览器的宽度,然后再把宽度平均分配给12列,html中一个盒子可以占用多列。要使用栅格系统,需要使用到container/container-fluid和row以及col-xs-/col-sm-/col-md-/col-lg-类。container相当于一个table盒子,装着许许多多的row,每个row里面装着许许多多的col,通过这样一种结构,构成了一个栅格系统,而container和container-fluid的唯一区别是,container-fluid是全屏的,而container不是全屏的,左右两边会有一个间距。

* `col-lg-n`:large,浏览器大于1200px时候的显示方式.
* `col-md-n`:middle,浏览器大于992px时候的显示方式.
* `col-sm-n`:small,浏览器>=768px时候的显示方式.
* `col-xs-n`:xsmall,浏览器小鱼768时候的限时方式.

bootstrap中的表格:

这个用起来相当简单,只要给表格添加一个table类就可以了。然后根据需要再添加其他的类。

  1. table-striped:条纹状表格。
  2. table-bordered:带边框的表格。
  3. table-hover:鼠标放上去有悬停效果。

可以通过css样式来给表格的具体列指定宽度。

30个你必须知道的选择器:

http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/

bootstrap中的表单:

  1. form类的种类:
  • form:这个类使表单元素填充100%的宽度。
  • form-inline:这个类使所有表单元素水平排列,表现出inline-block的样式。
  • form-horizontal:这个类使得他的子form-group盒子表现出水平排列的效果。
  1. form子盒子的类:
  • 直接子类通过form-group来将label和表单元素包裹起来可以获得最好的排列。
  • input/textarea/select等元素需要添加form-control类,才能使用bootstrap的定义好的样式。
  • checkbox:这个比较特殊,需要使用label进行包裹来获得最好的展示效果。
  • form相当于有container的功能,form-group有row的功能,可以直接在form-group中加一层div,然后添加class=‘col-md-10‘这样的代码来设置栅格布局。

按钮:

使用按钮很简单,只需要给button添加一个btn的类就可以了,然后根据需要添加其他的有特殊效果的class。

例如:

<button type="button" class="btn btn-default">Default</button>

带有特殊效果的预定义的类有:

  1. btn-default:默认的白色效果。
  2. btn-primary:蓝色的效果。
  3. btn-success:绿色的表示成功的效果。
  4. btn-info:浅蓝色的表示信息的效果。
  5. btn-warning:黄色的表示警告的效果。
  6. btn-danger: 红色的表示危险的效果。

另外,如果想让一个按钮表现出和父盒子一样的宽度,添加btn-block可以把按钮拉升到100%的宽度。还有一点需要注意的事,为了在所有浏览器中表现一致,官方推荐在input为submit的时候,应该尽量使用button来代替。

辅助类:

  1. 具有情景颜色意义的文本:
  • text-muted:颜色比较柔和的文本。
  • text-primary:蓝色的文本。
  • text-success: 代表成功的绿色文本。
  • text-info: 表示信息的浅蓝色文本。
  • text-warning: 表示警告信息的黄色文本。
  • text-danger:表示危险的红色文本。
  1. 具有情景颜色意义的文本背景:
  • bg-primary:蓝色的背景,字体是白色的。
  • bg-success:绿色的背景,字体是黑色的。
  • bg-info: 浅蓝色的背景,字体是黑色的。
  • bg-warning:黄色的背景,字体是黑色的。
  • bg-danger:红色的背景,字体是黑色的。

svg字体图标:

一种矢量字体图标,为什么说是字体,因为它的大小可以随着字体的大小变化而变化,并且放大不会出现锯齿。使用一个span标签包裹起来。

使用方式:

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

下拉菜单:

下拉菜单的触发器和下拉列表,需要放在一个class为dropdown的盒子里面。

  1. 触发器:必须有一个data-toggle=‘dropdown‘的属性,否则bootstrap不能给你收缩。并且为了更好的效果,需要给触发器一个dropdown-toggle的class。
  2. 下拉列表:下拉列表需要添加一个dropdown-menu类。

输入框组:

通过在文本输入框前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。使用 .input-group 包裹 .input-group-addon 类,可以给 .form-control 的前面或后面添加额外的元素。

基本使用:

<div class="form-group">
    <div class="input-group">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

注意:

  1. 不支持在输入框的单独一侧添加多个额外元素。
  2. 不支持在单个输入框组中添加多个表单控件。

导航条:

  1. 标签页:使用nav类定义一个标签页。然后使用nav-tabs定义一个普通的标签页,nav-pills来定义一个胶囊式的标签页。示例代码如下:
    普通标签页

    胶囊式标签页
  2. 导航条:
  • 导航条使用navbar类来作为导航条盒子。
  • 然后在里面使用container或者是container-fluid平铺的来作为容器。
  • 使用navbar-header来装brand。
  • 使用collapse这个盒子包装链接,可以在缩小的时候,有一个弹出按钮。
  • 使用nav navbar-nav来包裹真正的链接。
  • 使用navbar-fixed-top可以让导航条固定在顶部。
  • 使用navbar-static-top来静止在顶部,如果往下面滚动就会消失。
  • 使用navbar-inverse改变导航条的外观。
3.分页:
/*
     <nav>
       <ul class="pagination">
         <li><a href="#">&laquo;</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="#">&raquo;</a></li>
       </ul>
     </nav>
*/
active表示当前按钮是选中的,disabled表示当前按钮不可用。
  1. 标签:
    使用label类来表示一个标签。
    Default
    Primary
    Success
    Info
    Warning
    Danger
  2. 警告框:
    使用alert类来表示一个警告框。

    ...
    • alert-success:绿色的成功的。
    • alert-info:浅蓝色的表示信息。
    • alert-warning:黄色的表示警告。
    • alert-danger:红色的表示危险的,一般是失败的。
  3. 面板:
  • 通过使用panel类来添加一个面板。
  • 通过使用panel-heading来给面板添加一个标题,也可以通过使用panel-title类的h1-h6标签,添加一个预定义样式的标题。

以上是关于bootstarp的主要内容,如果未能解决你的问题,请参考以下文章

HTML:Marked-js+Bootstarp简单实现Markdown文本编辑器

使用bootstarp前端组件集成的table 分页组件 ;简单上手使用实现前端分页功能

bootstarp_项目实战__瓢城企业(注释+源码)

BootStarp的form表单的基本写法

bootstarp表单—利用bootstarp的响应式

HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页...