教你快速上手Bootstrap框架

柔情只为你懂 2023-10-13 20:16 82阅读 0赞

目录

      • 前言
      • 一，Bootstrap 12栅格系统
        • 1.1，Bootstrap 12栅格系统原理
        • 1.2，Bootstrap 12栅格系统的使用
        • 1.3，列组合 col-md
        • 1.3，列偏移 col-md-offset
        • 1.3，列嵌套 col-md
        • 1.3，列排序 col-md-push | col-md-pull
      • 二，响应式栅格
        • 2.1，响应式栅格的使用
      • 三，CSS全局样式
        • 3.1，排版——标题
        • 3.2，排版——对齐方式
        • 3.3，排版——列表
        • 3.4，表单——基本实例
        • 3.5，表单——水平排列的表单
        • 3.6，表单——校验状态
        • 3.7，表单——控件尺寸
        • 3.8，按钮——预定义样式
        • 3.9，按钮——按钮尺寸
      • 五，图片
        • 5.1，图片——响应式图片
        • 5.2，图片——图片形状
      • 最后

前言

根据上一章博客我们讲解了Bootstrap的安装
这一章来讲解一下12栅格系统 排版等等

一，Bootstrap 12栅格系统

1.1，Bootstrap 12栅格系统原理
  • 栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中

  • 实现原理

    • 通过定义容器的大小，平分为12份
    • 调整内外边距
    • 结合媒体查询
1.2，Bootstrap 12栅格系统的使用
  • 列组合
  • 列偏移
  • 列嵌套
  • 列排序
1.3，列组合 col-md
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     .row{
  13.         border: 1px solid cadetblue;
  14.     }
  15.     .row>div{
  17.         border: 1px solid darkblue;
  18.     }
  19. </style>
  20. <body>
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-4" >第一行：.col-md-4</div>
  24.             <div class="col-md-8">第一行：.col-md-8</div>
  25.         </div>
  26.         <div class="row">
  27.             <div class="col-md-2">第二行：.col-md-2</div>
  28.             <div class="col-md-10">第二行：.col-md-10</div>
  29.         </div>
  30.         <div class="row">
  31.             <div class="col-md-6">第三行：.col-md-6</div>
  32.             <div class="col-md-6">第三行：.col-md-6</div>
  33.         </div>
  34.     </div>
  35. </body>
  36. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  37. <script src="../js/jquery.js"></script>
  38. <!-- Bootstrap的JS插件-->
  39. <script src="../js/bootstrap.min.js"></script>
  40. </html>
  • 通过更改数字来合并列就是列组合

在这里插入图片描述

1.3，列偏移 col-md-offset
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     .row{
  13.         border: 1px solid cadetblue;
  14.     }
  15.     .row>div{
  17.         border: 1px solid darkblue;
  18.     }
  19. </style>
  20. <body>
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-4 col-md-offset-1" >第一行：.col-md-4</div>
  24.             <div class="col-md-8">第一行：.col-md-8</div>
  25.         </div>
  26.         <div class="row">
  27.             <div class="col-md-2 col-md-offset-1">第二行：.col-md-2</div>
  28.             <div class="col-md-4 col-md-offset-1">第二行：.col-md-4</div>
  29.         </div>
  30.         <div class="row">
  31.             <div class="col-md-10 col-md-offset-1">第三行：.col-md-10</div>
  32.             <div class="col-md-4">第三行：.col-md-4</div>
  33.         </div>
  34.     </div>
  35. </body>
  36. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  37. <script src="../js/jquery.js"></script>
  38. <!-- Bootstrap的JS插件-->
  39. <script src="../js/bootstrap.min.js"></script>
  40. </html>
  • 使用 .col-md-offset-* 类可以将列向右侧偏移
  • 一行12占满之后会自动下一行

在这里插入图片描述

1.3，列嵌套 col-md
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     .row{
  13.         border: 1px solid cadetblue;
  14.     }
  15.     .row>div{
  17.         border: 1px solid darkblue;
  18.     }
  19. </style>
  20. <body>
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-10">第一行：.col-md-10</div>
  24.             <div class="col-md-2">第一行：.col-md-2</div>
  25.         </div>
  26.         <div class="row">
  27.             <div class="col-md-6">第二行：.col-md-6</div>
  28.             <div class="col-md-6">
  29.                 <div class="row">
  30.                     <div class="col-md-6">1-1</div>
  31.                     <div class="col-md-6">1-2</div>
  32.                 </div>
  33.                 <div class="row">
  34.                     <div class="col-md-6">
  35.                         <div class="row">
  36.                             <div class="col-md-6">2-1</div>
  37.                             <div class="col-md-6">2-2</div>
  38.                         </div>
  40.                     </div>
  41.                     <div class="col-md-6">2-2</div>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </body>
  47. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  48. <script src="../js/jquery.js"></script>
  49. <!-- Bootstrap的JS插件-->
  50. <script src="../js/bootstrap.min.js"></script>
  51. </html>
  • 为了使用内置的栅格系统将内容再次嵌套，可以在已存在的 .col-md-* 元素内添加一个新的 .row 元素和一系列 .col-md-* 元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12

在这里插入图片描述

1.3，列排序 col-md-push | col-md-pull
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     .row{
  13.         border: 1px solid cadetblue;
  14.     }
  15.     .row>div{
  17.         border: 1px solid darkblue;
  18.     }
  19. </style>
  20. <body>
  21.     <div class="container">
  22.         <div class="row">
  23.             <div class="col-md-10">第一行：.col-md-10</div>
  24.             <div class="col-md-2">第一行：.col-md-2</div>
  25.         </div>
  26.         <div class="row">
  27.             <div class="col-md-4 col-md-push-1" >第二行：.col-md-4</div>
  28.             <div class="col-md-4 col-md-pull-1">第二行：.col-md-4</div>
  29.         </div>
  30.     </div>
  31. </body>
  32. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  33. <script src="../js/jquery.js"></script>
  34. <!-- Bootstrap的JS插件-->
  35. <script src="../js/bootstrap.min.js"></script>
  36. </html>
  • 通过使用col-md-push 和 col-md-pull 类就可以改变列的顺序

在这里插入图片描述
在这里插入图片描述

二，响应式栅格

在这里插入图片描述

2.1，响应式栅格的使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <div class="col-md-8 col-xs-12">
  21.             <h3>献给父亲身后默默支持的英雄</h3>
  22.             <div class="row">
  23.                 <ul class="col-md-6 col-xs-12">
  24.                     <li>这是一首由董玉方作词，许飞作曲、演唱的歌曲</li>
  25.                 </ul>
  26.                 <ul class="col-md-6 col-xs-12">
  27.                     省略部分HTML代码
  28.             </div>
  29.         </div>
  31.     </div>
  32. </body>
  33. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  34. <script src="../js/jquery.js"></script>
  35. <!-- Bootstrap的JS插件-->
  36. <script src="../js/bootstrap.min.js"></script>
  37. </html>
  • 页面方法缩小自适应

在这里插入图片描述
在这里插入图片描述

三，CSS全局样式

  • 又称为CSS布局，是Bootstrap三大核心内容的基础

  • 包括

    • 排版（Typography）

      • 标题、页面主体、对齐方式、列表

    • 表单（Forms）

      • 基本实例、内联表单、水平排列的表单、校验状态、控件尺寸

    • 按钮（Buttons）

      • 预定义样式、按钮尺寸

    • 图片（Images）

      • 响应式图片、图片形状
3.1，排版——标题

  • 在Bootstrap框架中，HTML的<’h1> 到 <’h6>均重新定义了标准样式，即提供了 .h1 到 .h6 类，目的是为内联属性的文本赋予标题的样式

    <!DOCTYPE html>





    bootstrap基础模板






    我是h1


    我是h2


    我是h3


    我是h4


    我是h5

    我是h6







平常使用标题标签的方式
在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <span class="h1">我是h1</span><br/>
  21.         <span class="h2">我是h2</span><br/>
  22.         <span class="h3">我是h3</span><br/>
  23.         <span class="h4">我是h4</span><br/>
  24.         <span class="h5">我是h5</span><br/>
  25.         <span class="h6">我是h6</span><br/>
  26.     </div>
  27. </body>
  28. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  29. <script src="../js/jquery.js"></script>
  30. <!-- Bootstrap的JS插件-->
  31. <script src="../js/bootstrap.min.js"></script>
  32. </html>

在非标题标签下使用 .h1 到 .h6 类的方式

在这里插入图片描述

3.2，排版——对齐方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <div class="duiqi text-center">
  21.             居中
  22.         </div><br>
  23.         <div class="duiqi text-left">
  24.             左对齐
  25.         </div><br>
  26.         <div class="duiqi text-right">
  27.             右对齐
  28.         </div><br>
  29.         <div class="duiqi text-justify">
  30.             两端对齐
  31.         </div><br>
  32.     </div>
  33. </body>
  34. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  35. <script src="../js/jquery.js"></script>
  36. <!-- Bootstrap的JS插件-->
  37. <script src="../js/bootstrap.min.js"></script>
  38. </html>

通过文本对齐类，可以简单方便的将文字重新对齐

在这里插入图片描述

3.3，排版——列表
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <dl class="dileibiao dl-horizontal">
  21.             <dt>水果</dt>
  22.             <dd>苹果、香蕉、橙子、西瓜、火龙果、猕猴桃</dd>
  23.             <dt>咖啡</dt>
  24.             <dd>速溶咖啡、拿铁、美式、摩卡</dd>
  25.             <dt>茶叶</dt>
  26.             <dd>红茶、绿茶、乌龙茶、黄茶、白茶、黑茶</dd>
  27.         </dl><br>
  28.     </div>
  29. </body>
  30. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  31. <script src="../js/jquery.js"></script>
  32. <!-- Bootstrap的JS插件-->
  33. <script src="../js/bootstrap.min.js"></script>
  34. </html>

水平定义列表

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <ul class="lileibiao list-inline text-center">
  21.             <li>HTML</li>
  22.             <li>CSS</li>
  23.             <li>JavaScript</li>
  24.             <li>Bootstrap</li>
  25.         </ul>
  26.     </div>
  27. </body>
  28. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  29. <script src="../js/jquery.js"></script>
  30. <!-- Bootstrap的JS插件-->
  31. <script src="../js/bootstrap.min.js"></script>
  32. </html>

内联列表

在这里插入图片描述

3.4，表单——基本实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-inline" action="#">
  21.             <div class="form-group">
  22.                 <label for="user">用户名:</label>
  23.                 <input type="text" class="form-control" id="user" placeholder="请输入用户名">
  24.             </div>
  25.             <div class="form-group">
  26.                 <label for="pwd">密码:</label>
  27.                 <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
  28.             </div>
  29.             <input type="submit" class="form-control" value="登录">
  30.         </form>
  31.     </div>
  32. </body>
  33. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  34. <script src="../js/jquery.js"></script>
  35. <!-- Bootstrap的JS插件-->
  36. <script src="../js/bootstrap.min.js"></script>
  37. </html>

在表单的默认样式基础上给表单添加 .form-control 和.form-group

在这里插入图片描述

3.5，表单——水平排列的表单
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-horizontal" action="#">
  21.             <div class="form-group">
  22.                 <label for="user" class="col-md-1">用户名:</label>
  23.                 <div class="col-md-8">
  24.                     <input type="text" class="form-control" id="user" placeholder="请输入用户名">
  25.                 </div>
  26.             </div>
  27.             <div class="form-group">
  28.                 <label for="pwd" class="col-md-1">密码:</label>
  29.                 <div class="col-md-8">
  30.                     <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
  31.                 </div>
  32.             </div>
  33.             <div class="form-group">
  34.                 <div class="col-md-offset-3 col-md-2">
  35.                     <input type="submit" class="form-control" value="登录">
  36.                 </div>
  37.             </div>
  38.         </form>
  39.     </div>
  40. </body>
  41. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  42. <script src="../js/jquery.js"></script>
  43. <!-- Bootstrap的JS插件-->
  44. <script src="../js/bootstrap.min.js"></script>
  45. </html>

可以通过为表单添加 .form-horizontal ，并联合使用Bootstrap预置的栅格类，可以将文字和表单控件水平排列布局

在这里插入图片描述

3.6，表单——校验状态
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-horizontal" action="#">
  21.             <div class="form-group has-warning">
  22.                 <label for="user" class="col-md-1">用户名:</label>
  23.                 <div class="col-md-8">
  24.                     <input type="text" class="form-control" id="user" placeholder="请输入用户名">
  25.                 </div>
  26.             </div>
  27.             <div class="form-group has-error">
  28.                 <label for="pwd" class="col-md-1">密码:</label>
  29.                 <div class="col-md-8">
  30.                     <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
  31.                 </div>
  32.             </div>
  33.             <div class="form-group">
  34.                 <div class="col-md-offset-3 col-md-2">
  35.                     <input type="submit" class="form-control" value="登录">
  36.                 </div>
  37.             </div>
  38.         </form>
  39.     </div>
  40. </body>
  41. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  42. <script src="../js/jquery.js"></script>
  43. <!-- Bootstrap的JS插件-->
  44. <script src="../js/bootstrap.min.js"></script>
  45. </html>

添加 .has-warning、.has-error 或 .has-success 到表单控件的父元素即可校验表单状态

在这里插入图片描述

3.7，表单——控件尺寸
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-horizontal" action="#">
  21.             <div class="form-group">
  22.                 <input type="text" class="input-lg form-control" placeholder="大型输入框">
  23.             </div>
  24.             <div class="form-group">
  25.                 <input type="text" class="form-control" placeholder="正常输入框">
  26.             </div>
  27.             <div class="form-group">
  28.                 <input type="text" class="input-sm form-control" placeholder="小型输入框">
  29.             </div>        
  30.         </form>
  31.     </div>
  32. </body>
  33. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  34. <script src="../js/jquery.js"></script>
  35. <!-- Bootstrap的JS插件-->
  36. <script src="../js/bootstrap.min.js"></script>
  37. </html>

通过.input-lg和.input-sm设置表单控件的尺寸

在这里插入图片描述

3.8，按钮——预定义样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-horizontal" action="#">
  21.             <button type="button" class="btn btn-default">（默认样式-灰色）Default</button>
  22.             <button type="button" class="btn btn-primary">（首选项-深蓝色）Primary</button>
  23.             <button type="button" class="btn btn-success">（成功-绿色）Success</button>
  24.             <button type="button" class="btn btn-info">（一般信息-天蓝色）Info</button>
  25.             <button type="button" class="btn btn-warning">（警告-黄色）Warning</button>
  26.             <button type="button" class="btn btn-danger">（危险-红色）Danger</button>
  27.             <button type="button" class="btn btn-link">（链接）Link</button>
  28.         </form>
  29.     </div>
  30. </body>
  31. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  32. <script src="../js/jquery.js"></script>
  33. <!-- Bootstrap的JS插件-->
  34. <script src="../js/bootstrap.min.js"></script>
  35. </html>

Bootstrap框架提供了七种样式的按钮风格

在这里插入图片描述

3.9，按钮——按钮尺寸
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <form class="form-horizontal" action="#">
  21.             <button type="button" class="btn btn-default">（默认样式-灰色）默认大小</button>
  22.             <button type="button" class="btn btn-primary btn-lg">（首选项-深蓝色）大型按钮
  23.         </button>
  24.             <button type="button" class="btn btn-success btn-sm">（成功-绿色）小型按钮
  25.         </button>
  26.             <button type="button" class="btn btn-info btn-xs">（一般信息-天蓝色）超小型按钮
  27.         </button>
  28.         </form>
  29.     </div>
  30. </body>
  31. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  32. <script src="../js/jquery.js"></script>
  33. <!-- Bootstrap的JS插件-->
  34. <script src="../js/bootstrap.min.js"></script>
  35. </html>

可以通过.btn-lg、.btn-sm 或 .btn-xs实现按钮具有不同的尺寸

在这里插入图片描述

五，图片

5.1，图片——响应式图片
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <img src="../../淘宝/img/1231.png" class="img-responsive">
  22.     </div>
  23. </body>
  24. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  25. <script src="../js/jquery.js"></script>
  26. <!-- Bootstrap的JS插件-->
  27. <script src="../js/bootstrap.min.js"></script>
  28. </html>
  • 为图片添加 .img-responsive 可以让图片支持响应式布局
  • 实质是为图片设置了max-width: 100%;、 height: auto; 和display: block; 属性，从而让图片在其父元素中更好的缩放

在这里插入图片描述

5.2，图片——图片形状
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bootstrap基础模板</title>
  7.     <!-- bootstrap的CSS文件 -->
  8.     <link rel="stylesheet" href="../css/bootstrap.min.css">
  9. </head>
  10. <style>
  11.     /* .row{
  12.         border: 1px solid cadetblue;
  13.     }
  14.     .row>div{
  15.         border: 1px solid darkblue;
  16.     } */
  17. </style>
  18. <body>
  19.     <div class="container">
  20.         <img src="../../淘宝/img/1231.png" class="img-rounded img-responsive" width="50%" alt=""><br>
  21.         <img src="../../淘宝/img/1231.png" class="img-circle img-responsive" width="50%" alt=""><br>
  22.         <img src="../../淘宝/img/1231.png" class="img-thumbnail img-responsive" width="50%" alt=""><br>
  23.     </div>
  24. </body>
  25. <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
  26. <script src="../js/jquery.js"></script>
  27. <!-- Bootstrap的JS插件-->
  28. <script src="../js/bootstrap.min.js"></script>
  29. </html>

为 元素添加.img-rounded、.img-circle、.img-thumbnail，可以让图片呈现不同的形状

在这里插入图片描述

最后

送大家一句最喜欢比阿斯的短话： 要从容地着手去做一件事，但一旦开始，就要坚持到底。

发表评论

表情：
评论列表 （有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读