bootstrap 基础（一）

1 bootstrap简介

  • bootstrap是Twitter公司的两名前端设计师设计的。
  • bootstrap是一款基于HTML、CSS和JavaScript的一个前端框架。
  • bootstrap的特点：

    • 是以移动设备优先。
    • bootstrap适用于所有的主流浏览器，解决了浏览器兼容问题。

2 bootstrap的环境

  • http://v3.bootcss.com/getting-started/#download下载用于生产环境的bootstrap。

  • 解压bootstrap的压缩包。

  • 下载jQuery的js文件

    • 根据https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js地址去获取对应版本的js文件，有两种方式。

      • ①由地址，我们可以知道jquery的版本是1.12.4，那么我们就可以去jQuery的官网下载对应的版本。
      • ②通过上面的地址，跳转到对应的地址，然后就会看到对应的js文件，保存到指定的位置即可。　

3 以移动设备为优先。窗口和移动设备一致

    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

4 bootstrap布局容器

 <!-- 宽度是1170px -->
   <div class="container" style="background-color: white">
        hello
   </div>
    <!-- 宽度是100% -->
    <div class="container-fluid">
        world
    </div>
  • 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
    <!-- 宽度是1170px -->
   <div class="container" style="background-color: white">
        hello
   </div>
    <!-- 宽度是100% -->
    <div class="container-fluid">
        world
    </div>

</body>
</html>

5 排版标签

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
   <div class="container-fluid" style="background-color: #ffffff">
       <!--
           class="page-header" 设置页头，给标题加一个分割线
       -->
       <!--
            h1是36px
            h2是30px
            h3是24px
            h4是18px
            h5是14px
            h6是12px
       -->
       <h1 class="page-header">产品展示</h1>
       <h3 class="page-header">新闻内容</h3>
   </div>

</body>
</html>
  • <small></small> 小一号副标题
  • <big></big> 大一号标题
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
   <div class="container-fluid" style="background-color: #ffffff">
       <!--
           class="page-header" 设置页头，给标题加一个分割线
       -->
       <!--
            h1是36px
            h2是30px
            h3是24px
            h4是18px
            h5是14px
            h6是12px
       -->
       <h1 class="page-header">
           产品展示
           <small>呵呵</small>
       </h1>
       <h3 class="page-header">
           新闻内容
            <big>
                哈哈
            </big>
       </h3>
   </div>

</body>
</html>
  • <p></p>  14px
  • <strong></strong> 推荐使用的加粗
  • <em></em>推荐使用的
  • <del></del>删除线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
   <div class="container-fluid" style="background-color: #ffffff">
       <p>
           <em>w3schools.com</em> 是最受欢迎的前端技术教程网站，
           但是国内用户一直不能访问，
           并且国内的中文翻译版本<del>十分陈旧</del>。
           因此做了个镜像，<strong>希望</strong>英文好的同学直接去看原版教程吧！
       </p>
   </div>

</body>
</html>

6 文本对齐方式

  • class="text-left" 向左对齐
  • class="text-center" 居中对齐
  • class="text-right" 向右对齐
  • class="text-uppercase" 设置英文大写
  • class="text-lowercase" 设置英文小写
  • class="text-capitalize" 设置英文首字母大写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
    <h1 class="text-right">你好</h1>
    <h1 class="text-center">世界</h1>
    <h1 class="text-left">我不好</h1>

    <p class="text-uppercase">
        以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
        Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
    </p>
    <p class="text-lowercase">
        以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
        Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
    </p>
    <p class="text-capitalize">
        以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
        Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
    </p>

</div>

</body>
</html>

7 列表

  • 有序列表
<ol>
     <li></li>
    <li></li>
    <li></li>
</ol>
  • 无序列表
<ul>
     <li></li>
    <li></li>
    <li></li>
</ul>
  • 定义列表
<dl>
     <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>
  • class="list-unstyled" 去除列表前面的符号和原有的格式。
  • class="list-inline"   把<li></li>之间的内容，纵向变横向。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">

    <!--
     列表
    -->
   <!--  有序列表 -->
    <h3 class="page-header">有序列表</h3>
    <ol>
        <li>哈哈</li>
        <li>呵呵</li>
        <li>嘻嘻</li>
    </ol>
    <h3 class="page-header">去除列表前面的符号和原有的格式的有序列表</h3>
    <ol class="list-unstyled">
        <li>哈哈</li>
        <li>呵呵</li>
        <li>嘻嘻</li>
    </ol>
    <h3 class="page-header">去除符号的横向有序列表</h3>
    <ol class="list-unstyled list-inline">
        <li>哈哈</li>
        <li>呵呵</li>
        <li>嘻嘻</li>
    </ol>

</div>

</body>
</html>

  • class="dl-horizontal" 由纵向变为横向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">

   <h3 class="page-header">定义列表</h3>
   <dl class="dl-horizontal">
       <dt>标题</dt>
       <dd>内容对标题的解释</dd>
   </dl>

</div>
</body>
</html>

8 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
  <table>
      <tr>
          <td>产品编号</td>
          <td>产品名称</td>
          <td>产品状态</td>
      </tr>
      <tr>
          <td>0001</td>
          <td>宝马</td>
          <td>未发货</td>
      </tr>
      <tr>
          <td>0002</td>
          <td>奥迪</td>
          <td>已发货</td>
      </tr>
      <tr>
          <td>0003</td>
          <td>丰田</td>
          <td>已退货</td>
      </tr>
      <tr>
          <td>0004</td>
          <td>本田</td>
          <td>正在处理中</td>
      </tr>

  </table>

</div>
</body>
</html>

  • class="table" 表格的一个基类，如果需要加其他的表格样式，都必须在.table的基础上。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
  <table class="table">
      <tr>
          <td>产品编号</td>
          <td>产品名称</td>
          <td>产品状态</td>
      </tr>
      <tr>
          <td>0001</td>
          <td>宝马</td>
          <td>未发货</td>
      </tr>
      <tr>
          <td>0002</td>
          <td>奥迪</td>
          <td>已发货</td>
      </tr>
      <tr>
          <td>0003</td>
          <td>丰田</td>
          <td>已退货</td>
      </tr>
      <tr>
          <td>0004</td>
          <td>本田</td>
          <td>正在处理中</td>
      </tr>

  </table>

</div>
</body>
</html>

  • class="table table-bordered" 给表格加外边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
  <table class="table table-bordered">
      <tr>
          <td>产品编号</td>
          <td>产品名称</td>
          <td>产品状态</td>
      </tr>
      <tr>
          <td>0001</td>
          <td>宝马</td>
          <td>未发货</td>
      </tr>
      <tr>
          <td>0002</td>
          <td>奥迪</td>
          <td>已发货</td>
      </tr>
      <tr>
          <td>0003</td>
          <td>丰田</td>
          <td>已退货</td>
      </tr>
      <tr>
          <td>0004</td>
          <td>本田</td>
          <td>正在处理中</td>
      </tr>
  </table>

</div>
</body>
</html>

  • class="table table-hover" 鼠标悬停效果，鼠标移到行或者单元格上，变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
  <table class="table table-bordered table-hover">
      <tr>
          <td>产品编号</td>
          <td>产品名称</td>
          <td>产品状态</td>
      </tr>
      <tr>
          <td>0001</td>
          <td>宝马</td>
          <td>未发货</td>
      </tr>
      <tr>
          <td>0002</td>
          <td>奥迪</td>
          <td>已发货</td>
      </tr>
      <tr>
          <td>0003</td>
          <td>丰田</td>
          <td>已退货</td>
      </tr>
      <tr>
          <td>0004</td>
          <td>本田</td>
          <td>正在处理中</td>
      </tr>
  </table>

</div>
</body>
</html>

  • class="table table-striped" 斑马线效果，就是单行和双行的颜色不一样，就好像斑马身上的条纹一样。

  • class="table table-condensed" 使得表格变得紧凑
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
  <table class="table table-bordered table-hover table-striped table-condensed">
      <tr>
          <td>产品编号</td>
          <td>产品名称</td>
          <td>产品状态</td>
      </tr>
      <tr>
          <td>0001</td>
          <td>宝马</td>
          <td>未发货</td>
      </tr>
      <tr>
          <td>0002</td>
          <td>奥迪</td>
          <td>已发货</td>
      </tr>
      <tr>
          <td>0003</td>
          <td>丰田</td>
          <td>已退货</td>
      </tr>
      <tr>
          <td>0004</td>
          <td>本田</td>
          <td>正在处理中</td>
      </tr>
  </table>

</div>
</body>
</html>

  • class="table-responsive" 给table的父元素加，移动设备优先，如果内容不能完全显示，会出现响应式的滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped table-condensed">
          <tr>
              <td>产品编号</td>
              <td>产品名称</td>
              <td>产品状态</td>
          </tr>
          <tr>
              <td>0001</td>
              <td>宝马</td>
              <td>未发货</td>
          </tr>
          <tr>
              <td>0002</td>
              <td>奥迪</td>
              <td>已发货</td>
          </tr>
          <tr>
              <td>0003</td>
              <td>丰田</td>
              <td>已退货</td>
          </tr>
          <tr>
              <td>0004</td>
              <td>本田</td>
              <td>正在处理中</td>
          </tr>
      </table>
    </div>
</div>
</body>
</html>
  • 状态类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
    <div class="table-responsive">
      <table class="table table-bordered table-hover table-striped table-condensed">
          <tr class="active">
              <td>产品编号</td>
              <td>产品名称</td>
              <td>产品状态</td>
          </tr>
          <tr class="info">
              <td>0001</td>
              <td>宝马</td>
              <td>未发货</td>
          </tr>
          <tr class="success">
              <td>0002</td>
              <td>奥迪</td>
              <td>已发货</td>
          </tr>
          <tr class="warning">
              <td>0003</td>
              <td>丰田</td>
              <td>已退货</td>
          </tr>
          <tr class="danger">
              <td>0004</td>
              <td>本田</td>
              <td>正在处理中</td>
          </tr>
      </table>
    </div>
</div>
</body>
</html>

9 响应式图片

  • class="img-responsive" 图片响应式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
    <img src="img/timg.jpg" class="img-responsive"/>
</div>
</body>
</html>

  • class="img-circle" 以圆形展示

  • class="img-rounded" 将图片的四个角变为圆角，圆角矩形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
    <img src="img/timg.jpg" class="img-responsive img-rounded"/>
</div>
</body>
</html>

  • class="thumbnail" 给图片加圆角的边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
    <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
</div>
</body>
</html>

10 栅格系统

  • 栅格系统一定要放入容器中。
  • 栅格系统，浏览器窗口最多自动分成12列，所以栅格系统又称为“十二栅格”。
  • 栅格系统是由行(row)和列(col)表示。
  • 验证：十二栅格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        div[class*=‘col-md‘]{
            border:1px solid #1b6d85;
        }

    </style>

</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-2</div>
        <div class="col-md-1">col-md-3</div>
        <div class="col-md-1">col-md-4</div>
        <div class="col-md-1">col-md-5</div>
        <div class="col-md-1">col-md-6</div>
        <div class="col-md-1">col-md-7</div>
        <div class="col-md-1">col-md-8</div>
        <div class="col-md-1">col-md-9</div>
        <div class="col-md-1">col-md-10</div>
        <div class="col-md-1">col-md-11</div>
        <div class="col-md-1">col-md-12</div>
        <div class="col-md-1">col-md-13</div>
        <div class="col-md-1">col-md-14</div>
    </div>

</div>
</body>
</html>

  • 栅格系统案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        div[class*=‘col-md‘]{
            border:1px solid #2b669a;
        }
    </style>

</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-2</div>
        <div class="col-md-1">col-md-3</div>
        <div class="col-md-1">col-md-4</div>
        <div class="col-md-1">col-md-5</div>
        <div class="col-md-1">col-md-6</div>
        <div class="col-md-1">col-md-7</div>
        <div class="col-md-1">col-md-8</div>
        <div class="col-md-1">col-md-9</div>
        <div class="col-md-1">col-md-10</div>
        <div class="col-md-1">col-md-11</div>
        <div class="col-md-1">col-md-12</div>
        <div class="col-md-1">col-md-13</div>
        <div class="col-md-1">col-md-14</div>
    </div>
    <div class="row">
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
    </div>
    <div class="row">
        <div class="col-md-6">6</div>
        <div class="col-md-6">6</div>
    </div>
    <div class="row">
        <div class="col-md-2">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-7">7</div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
        <div class="col-md-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
        <div class="col-md-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
    </div>

</div>
</body>
</html>

  • 栅格参数

  • 如果想要栅格系统实现响应式，那么必须使用栅格参数了。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        div[class*=‘col-md‘]{
            border:1px solid #2b669a;
        }
    </style>

</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
    <div class="row">
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-1</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-2</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-3</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-4</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-5</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-6</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-7</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-8</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-9</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-10</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-11</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-12</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-13</div>
        <div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-14</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">6</div>
        <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">6</div>
    </div>
    <div class="row">
        <div class="col-md-2 col-xs-2 col-lg-2 col-sm-2">2</div>
        <div class="col-md-3 col-xs-2 col-lg-2 col-sm-2">3</div>
        <div class="col-md-7 col-xs-2 col-lg-2 col-sm-2">7</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
        <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
            <img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
            <h3 class="page-header">美女</h3>
            <p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
        </div>
    </div>

</div>
</body>
</html>

时间： 2024-10-10 09:12:50

bootstrap 基础（一）的相关文章

bootstrap基础学习【表单含按钮】（二）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

Bootstrap &lt;基础二十五&gt;警告（Alerts）

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

BootStrap基础入门

BootStrap基础入门 一.BootStrap概述 1.1什么是BootStrap BootStrap,基于HTML.CSS.JavaScript的前端框架(半成品).其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现 BootStrap在jQuery的基础工作,可以理解BootStrap就是jQuery的一个插件. BootStrap使得web开发更加快捷,代码优雅,美观大方. 由Twitter公司的设计

Bootstrap &lt;基础二十八&gt;列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo

Bootstrap &lt;基础二十二&gt;超大屏幕（Jumbotron）

Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <tit

Bootstrap &lt;基础二十一&gt;徽章（Badges）

Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class="badge"> 添加到链接.Bootstrap 导航等这些元素上即可. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 徽章(Badges)</ti

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实