Bootstrap的基本使用

时间:2019-11-20
本文章向大家介绍Bootstrap的基本使用，主要包括Bootstrap的基本使用使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

目录

  • 官方文档 https://v3.bootcss.com/

  • Bootstrap是一个基于JQuery的前端框架, 因此使用Bootsrap先导入JQuery
    • JQuery
    • css文件
    • js文件

全局CSS样式

布局容器

  • class=container 两侧有留白
  • class=container-fluid 无留白

栅格系统

  • 默认情况下, 一个row就是一行, 一个row被分为十二等份 class="row"
  • 我们可以通过 class=col-md-num 来控制占用几等份
  • 尺寸 xs sm md lg
  • 列偏移 class="col-md-offset-num" 向右移几等份
  • 列顺序 class="col-md-pull-2" 或者 class="col-md-push-10"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap的使用</title>
    <!--必须先导入JQuery, 再导入bootstrap的css文件和js文件-->
    <script src="JQuery/JQuery.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <!--保证移动设备缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .c1 {
            border: 1px black solid;
            background-color: red;
            height: 50px;
        }
    </style>
</head>
<body>
<!--container表示两边留白, container-fluid1表示100%宽度-->
<div class="container">
    <!--栅格结构-->
    <div class="row c1">
        <div class="col-md-3 c1">col-md-3</div>
        <div class="col-md-9 c1">col-md-9</div>
        <!--列偏移offset-->
        <div class="col-md-6 col-md-offset-3 c1">col-md-6</div>
        <!--pull和push可以改变列的顺序-->
        <div class="col-md-10 col-md-push-2 c1">col-md-10</div>
        <div class="col-md-2 col-md-pull-10 c1">col-md-2</div>
    </div>
</div>
</body>
</html>

排版

  • <small></small> 小号文本
  • <em></em> 斜体
  • <u></u> 下划线
  • <del></del> 横线
  • <strong></strong> 加粗
  • <mark></mark> 高亮
  • class="lead" 文本变大
  • class="text-center" 文本居中
  • class="pull-left/right" 浮动

表格

  • class="table"
  • class="table-hover"
  • class="table-bordered"
  • class="table-striped"
<div class="container">
    <div class="row"></div>
    <div class="col-md-8">
        <!--设置表格样式 条纹, 边框, 悬浮效果-->
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <!--添加背景颜色-->
            <tr class="success">
                <th>name</th>
                <th>gender</th>
                <th>age</th>
            </tr>
            </thead>
            <tbody>
            <tr class="danger">
                <td>Alpha</td>
                <td>male</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Bravo</td>
                <td>male</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Charlie</td>
                <td>male</td>
                <td>18</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

表单

  • class="form-control"

  • class="form-inline" 内联表单


<div class="container">
    <!--普通表单-->
    <form action="">
        <div class="form-group">
            <label for="d1">Username</label>
            <input type="text" id="d1" class="form-control" placeholder="name">
            <br>
            <label for="d2">Password</label>
            <input type="password" id="d2" class="form-control" placeholder="password">
        </div>
    </form>

    <!--内联表单-->
    <form class="form-inline">
        <div class="form-group">
            <label for="d3"></label>
            <input type="email" id="d3" class="form-control" placeholder="email">
            <label for="d4"></label>
            <input type="password" id="d4" class="form-control" placeholder="password">
            <button type=submit class="btn btn-primary">Sign in</button>
        </div>
    </form>
</div>

按钮

  • class="btn"
  • class="btn-default" 设置按钮颜色

图片

  • <img src="..." alt="..." class="img-rounded">

  • <img src="..." alt="..." class="img-circle">

  • <img src="..." alt="..." class="img-thumbnail">

辅助

  • 文本颜色
  • 背景颜色
  • 关闭按钮
  • 清除浮动

组件

图标

  • bootstrap图标

  • fontawsome图标

导航条

巨幕

面板

JS插件

原文地址：https://www.cnblogs.com/bigb/p/11900589.html

随机文章
WEB前端知识点必读
最近更新