• 开题报告
  • 社会实践报告
  • 申请报告
  • 研究报告
  • 党政报告
  • 可行性报告
  • 情况报告
  • 事迹材料
  • 申报材料
  • 述廉报告
  • 调查报告
  • 实验报告
  • 整改措施
  • 整改报告
  • 整改方案
  • 考察报告
  • 结题报告
  • 竞聘报告
  • 请示报告
  • 社会调查报告
  • 自查报告
  • 报告写作指导
  • 学习报告
  • 当前位置: 天一资源网 > Bootstrap 正文

    Bootstrap,基础_基础

    时间:2018-07-23 22:57:35 来源:天一资源网 本文已影响 天一资源网手机站

    -

    ### 什么是`Bootstrap`?

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

    ### 如何使用`bootstrap`?

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

    ```html

    《!-- 新 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`:浏览器大于1200px时候的显示方式.

    * `col-md-n`:浏览器大于992px时候的显示方式.

    * `col-sm-n`:浏览器》=768px时候的显示方式.

    * `col-xs-n`:浏览器小鱼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`盒子表现出水平排列的效果。

    2. `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`。

    例如:

    ```html

    《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`:表示危险的红色文本。

    2. 具有情景颜色意义的文本背景:

    * `bg-primary`:蓝色的背景,字体是白色的。

    * `bg-success`:绿色的背景,字体是黑色的。

    * `bg-info`: 浅蓝色的背景,字体是黑色的。

    * `bg-warning`:黄色的背景,字体是黑色的。

    * `bg-danger`:红色的背景,字体是黑色的。

    ### `svg`字体图标:

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

    使用方式:

    ```html

    《span class="glyphicon glyphicon-search"》《/span》

    ```

    ### 下拉菜单:

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

    1. 触发器:必须有一个`data-toggle='dropdown'`的属性,否则`bootstrap`不能给你收缩。并且为了更好的效果,需要给触发器一个`dropdown-toggle`的`class`。

    2. 下拉列表:下拉列表需要添加一个`dropdown-menu`类。

    ### 输入框组:

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

    基本使用:

    ```html

    《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`来定义一个胶囊式的标签页。示例代码如下:

    ```html

    **普通标签页**

    《ul class="nav nav-tabs" role="tablist"》

    《li role="presentation" class="active"》《a href="#"》Home《/a》《/li》

    《li role="presentation"》《a href="#"》Profile《/a》《/li》

    《li role="presentation"》《a href="#"》Messages《/a》《/li》

    《/ul》

    ```

    ```html

    **胶囊式标签页**

    《ul class="nav nav-pills" role="tablist"》

    《li role="presentation" class="active"》《a href="#"》Home《/a》《/li》

    《li role="presentation"》《a href="#"》Profile《/a》《/li》

    《li role="presentation"》《a href="#"》Messages《/a》《/li》

    《/ul》

    ```

    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="#"》«《/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》

    《/nav》

    ```

    `active`表示当前按钮是选中的,`disabled`表示当前按钮不可用。

    4. 标签:

    使用`label`类来表示一个标签。

    ```

    《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》

    ```

    5. 警告框:

    使用`alert`类来表示一个警告框。

    ```

    《div class="alert alert-success" role="alert"》...《/div》

    ```

    * `alert-success`:绿色的成功的。

    * `alert-info`:浅蓝色的表示信息。

    * `alert-warning`:黄色的表示警告。

    * `alert-danger`:红色的表示危险的,一般是失败的。

    6. 面板:

    * 通过使用`panel`类来添加一个面板。

    * 通过使用`panel-heading`来给面板添加一个标题,也可以通过使用`panel-title`类的`h1-h6`标签,添加一个预定义样式的标题。

    *

    相关关键词: Bootstrap bootstrap基础模板 bootstrap基础教程
    相关热词搜索: Bootstrap 基础 bootstrap基础模板 bootstrap基础教程

    • 范文大全
    • 教案下载
    • 优秀作文
    • 励志
    • 课件
    • 散文
    • 名人名言