一篇文章学会使用BootStrap

最新推荐文章于 2024-03-26 09:44:05 发布

Always--Learning

最新推荐文章于 2024-03-26 09:44:05 发布

阅读量6.3k

点赞数 67

分类专栏： BootStrap 文章标签：原力计划

本文链接：https://blog.csdn.net/sinat_41696687/article/details/113562318

版权

本文全面介绍了BootStrap的使用，包括引入结构、基本模板、流体和固定容器、栅格系统、标题标签、常用标签、表格、按钮、图片、辅助类、响应式工具等。详细讲解了各个组件的用法和效果，是初学者掌握BootStrap的理想教程。

摘要由CSDN通过智能技术生成

1：引入BootStrap的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

2：基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 下面一句的作用是告诉IE浏览器以最新版本（edge)的方式渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 实现响应式，支持移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

3：流体容器（.container-fluid）

流体容器会随着页面窗口的大小变化而变化，其宽度始终占据整个屏幕的宽度。
流体容器相当于width=100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container-fluid {
    
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        test
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

4：固定容器（.container）

固定容器的宽度是固定的，不会随屏幕大小的变化而变化。
固定容器是有三个阈值的，如下图所示（当屏幕宽度大于等于1200px的时候，容器的宽度为1170px）

5：栅格系统

在栅格系统中一行被分为12列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
    
            background-color: aqua;
        }
        div[class |= col] {
    
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-10">col-lg-10</div>
            <div class="col-lg-2">col-lg-2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg-10">col-lg-10</div>
        </div>
        <div class="row">
            <div class="col-lg-6">col-lg-6</div>
            <div class="col-lg-6">col-lg-6</div>
        </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</body>
</html>

5.1 效果

5.2 列的阈值划分（lg,md,sm,xs的含义）

5.3 被两个列控制

当屏幕处于lg的时候是10列，2列分布
当屏幕处于md大小的时候，是6列，6列平分。

当屏幕处于sm的状态时，第一个占6列，第二个占6列，第二个之所以占6列，是因为第二个col-xs-6向上兼容。

5.4 列偏移

向右偏移一列。

6：标题标签

给类名添加.h1到.h6，实现下面的效果

7：常用标签

7.1 对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

7.2 改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

7.3 常用标签查询网址

https://v3.bootcss.com/css/#overview

8：表格（table)

模板代码

<div class="container table-responsive">
        <table class="table table-bordered table-striped table-hover ">
            <tr class="success">
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
        </table>
    </div>

使用方法网址：表格

8.1 把表格变成响应式表格

通过给container所在的div添加table-responsive

9：按钮

参考网址
添加类名 btn-block 会让按钮占一整行
通过类名active使得按钮处于激活状态（被按的情况）
添加类名 disabled 使得按钮处于禁用状态

9.1 按钮模板

<div class="container">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <!-- 在导航和导航条上一般使用button -->
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <button type="button" class="btn btn-success">（成功）Success</button>
        <button type="button" class="btn btn-primary btn-block btn-lg">（大按钮）Large button</button>
        <button type="button" class="btn btn-success btn-lg">（大按钮）Large button</button>

        <!-- 把按钮变为块元素 -->
        <button class="btn btn-success btn-block btn-md">充满容器</button>
        <!-- 使得按钮处于激活状态 -->
        <button class="btn btn-success btn-block btn-md active">充满容器</button>
        <!-- 使按钮处于不可用状态 -->
        <button class="btn btn-success btn-block btn-md disabled">充满容器</button>
    </div>

9.2 模板效果

10：图片

类名	作用
img-responsive	使图片支持响应式布局
center-block	让图片居中
img-rounded	使图片表现为圆角矩形
img-circle	使图片表现为圆形
img-thumbnail	让图片表现为带相册框的矩形

10.1 示例代码

<div class="container">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-rounded">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-circle">
        <img src="images/01-242x200.jpg" class="img-responsive center-block img-thumbnail">
    </div>

10.2 效果展示

11：辅助类

11.1 关闭符号

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

11.2 三角符号

<span class="caret"></span>

11.3 快速浮动

类名	作用
pull-left	快速左浮动
pull-right	快速右浮动

11.4 让内容块居中

类名	作用
center-block	内容块居中
text-center	让div中的文本居中

11.5 清除浮动

类名	作用
clearfix （这个类名是给父元素添加的）	清除浮动

12：响应式工具

12.1 隐藏或显示内容

通过添加如下类名，实现隐藏或显示内容（带星号的不要用）

13：缩略图

13.1 仿BootStrap官网缩略图源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail h3 {
    
            color: #337ab7;
        }
        .thumbnail small {
    
            font-size: 65%;
            text-align: center;
            line-height: 1;
            font-weight: 400;
        }
        .thumbnail p {
    
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="images/BootStrap网站实例.png" alt="...">
                    <div class="caption">
                        <h3 class="text-center">优站精选<br>
                            <small> Bootstrap 网站实例</small></h3>
                        <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                    </div>
                </div>