• 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插件

  • 相关阅读:
    【音视频】视频质量测试方向-标准
    解决苹果提审,APP Store看不到自家的App!!!
    【音视频】自研直播推流-流程概览
    【PyCharm】破解+汉化,一劳永逸
    jmeter+ant+jenkins 搭建接口自动化测试
    jenkins部署
    ruby File类
    ant + jmeter 自动化接口测试环境部署
    jmeter 插件安装
    ruby Logger日志
  • 原文地址:https://www.cnblogs.com/bigb/p/11900589.html
Copyright © 2020-2023  润新知