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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值