Bootstrap 是什么

      Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

  •    自适应布局：

         通过改变页面布局的分辨率，去自动适应当前浏览器窗口的大小。在这个过程中页面的布局的样式不改变。

  •    响应式布局：

         通过改变自身页面的布局的样式和分辨率，去自动适应当前浏览器窗口的大小。在这个过程中页面的布局样式会改变。

  如何下载：

中文官网：

    http://v3.bootcss.com/

   下载生产版本

App框架html5源码 开源html框架_bootstrap

 

 

安装使用

目录结构

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   └── nmp.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构：

预编译文件可以直接使用到任何 web 项目中。

Bootstrap 提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。

同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。

同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

 

以上都是官方的解释。我们平时使用的话，一般就只要关注下面三个文件即可：

  - bootstrap.css                      # Bootstrap 核心 CSS 文件，生产环境使用 bootstrap.min.css

  - bootstrap-theme.css            # 可选的 Bootstrap 主题文件（一般不用引入），生产环境使用  bootstrap-theme.min.css

  - bootstrap.js                        # Bootstrap 核心 JavaScript 文件，生产环境使用   bootstrap.min.js  

Bootstrap 插件全部依赖 jQuery

请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。

CDN方式引入

Bootstrap 插件全部依赖 jQuery

请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。

 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ –>
<title>Bootstrap 101 Template</title>
<!--SDN引入-->
 <!-- 最新版本的 Bootstrap 核心 CSS 文件 –>
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <!-- 可选的 Bootstrap 主题文件（一般不用引入）—>
      <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">—><!—jQuery 应该比 Bootstrap 的 js 文件先被引入 -->
     <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script>
  <!--最新的 Bootstrap 核心 JavaScript 文件 –>
      <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!---->

本地方式引入

 

其他一样与上面的一样

<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 自己下载的 jQuery 文件，首页应被引入 -->
<script type="application/javascript" src="jquery-3.1.1.js"></script>
<script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 

有序列表

效果图

App框架html5源码 开源html框架_App框架html5源码_02

代码

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

 

 

表格

    基本样式

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

<table class="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>主机名</th>
                <th>端口号</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>host1.com</td>
                <td>80</td>
            </tr>
            <tr>
                <td>2</td>
                <td>host2.com</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>

 

效果图：

 

App框架html5源码 开源html框架_Bootstrap_03

 

 

条纹状表格

 

<table> 标签中添加 .table-striped  类可以给 <tbody> 之内的每一行增加斑马条纹样式。

   跨浏览器兼容性

   条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

 

效果图：

App框架html5源码 开源html框架_App框架html5源码_04

 

代码：

<table class="table table-striped">

    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        </tr>
    </tbody>
</table>

 

 

带边框的表格

 

通过在 <table> 标签中添加 .table-bordered  类为表格和其中的每个单元格增加边框。

 

效果图：

App框架html5源码 开源html框架_App框架html5源码_05

代码：

<table class="table table-bordered">
  
    ...

</table>

鼠标悬停：

通过在 <table> 标签中添加 .table-hover  类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应，默认是灰色加深。

效果图：

鼠标悬停在第二行，颜色变深了

App框架html5源码 开源html框架_App框架html5源码_06

代码：

<table class="table table-hover table-striped">
 
     ...

</table>

 

紧缩表格：

通过在 <table> 标签中添加 .table-condensed  类可以让表格更加紧凑，单元格中的内补（padding）均会减半（主要体现在上下空间），可与以上类同时使用。

 

代码：

<table class="table table table-condensed   table-striped">

    ...

</table>

 

状态类

通过这些状态类可以为行或单元格设置颜色。

App框架html5源码 开源html框架_bootstrap_07

 

 

效果图：

 

App框架html5源码 开源html框架_css_08

 

代码：

 

<table class="table table-hover table-striped">

<thead>
    <tr class="success">
        <th>#</th>
        <th class="active">First Name</th>
        <th class="success">Last Name</th>
        <th class="warning">Username</th>
    </tr>
</thead>
<tbody>
    <tr class="active">
        <td class="danger">1</td>
        <td class="info">Mark</td>
        <td class="active">Otto</td>
        <td>@mdo</td>
    </tr>
    <tr class="warning">
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr  class="danger">
        <td>3</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>

    <tr  class="info">
        <td>4</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
</tbody>
</table>

 

 

以上算是个引子，上网方便的话还是直接上官网上查看使用方法吧，随用随看随学