一篇文章学会使用BootStrap

本文全面介绍了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>
          
  • 67
    点赞
  • 307
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值