前端之Bootstrip

前端之Bootstrip
- 1. Bootstrip介绍

1. Bootstrip介绍

Bootstrap是HTML、CSS和JS框架，用于开发响应式布、移动设备优先的WEB项目。

Bootstrap是依赖jQuery所以要把jQuery导入

导入

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

1.1 布局容器

//两边有留白布局
<div class="container"></div>
//两边没有留白布局
<div class="container-fluid"></div>

1.2 栅格系统

<div class='row'></div>
// 写一个row就是将所在的区域划分成12份

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        .c1 {
            height: 100px;
            background-color: orange;
            border:1px solid black;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        //平均分两份
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>
        //分三份2-8-2
        <div class="col-md-2 c1"></div>
        <div class="col-md-8 c1"></div>
        <div class="col-md-2 c1"></div>
        //分两份3-9
        <div class="col-md-3 c1"></div>
        <div class="col-md-9 c1"></div>
    </div>
</div>
</body>
</html>

总结:

写一个row就是将所在的区域划分成12份

col-md-N 占几份

1.2.1 栅格参数

超小屏幕: .col-xs-
小屏幕:.col-sm-
中等屏幕:.col-md-
大屏幕 :.col-lg-

如果要兼容全部的屏幕把这四个参数都写上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        .c1 {
            height: 100px;
            background-color: orange;
            border:1px solid black;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 col-xm-6 col-lg-6 c1"></div>
        <div class="col-md-6 col-xs-6 col-xm-6 col-lg-6 c1"></div>
        <div class="col-md-2 col-xs-2 col-xm-2 col-lg-2 c1"></div>
        <div class="col-md-8 col-xs-8 col-xm-8 col-lg-8 c1"></div>
        <div class="col-md-2 col-xs-2 col-xm-2 col-lg-2 c1"></div>
        <div class="col-md-3 col-xs-3 col-xm-3 col-lg-3 c1"></div>
        <div class="col-md-9 col-xs-9 col-xm-9 col-lg-9 c1"></div>
    </div>
</div>
</body>
</html>

如果用到了8份想让它居中
 <div class="col-md-8 col-xs-8 c1 col-md-offset-2"></div>
col-md-offset-2 从左向右移两份

1.3 排版

1.4 表格

Bootstrap之表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <table class="table table-hover table-striped table-bordered">
    <thead>
        <tr class="success">
            <th>ID</th>
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
        </tr>
    </thead>

    <tbody>
        <tr class="warning">
            <td>1</td>
            <td>Hans</td>
            <td>123</td>
            <td>read</td>
        </tr>
        <tr class="danger">
            <td>1</td>
            <td>Hans</td>
            <td>123</td>
            <td>read</td>
        </tr>

        <tr class="info">
            <td>1</td>
            <td>Hans</td>
            <td>123</td>
            <td>read</td>
        </tr>
    </tbody>
</table>
    </div>
</div>
</body>
</html>

1.5 表单

Bootstrap之表单

为了好看可以给表单加个 class="form-control"

更多图标看组件里https://v3.bootcss.com/components/#glyphicons

和Font Awesome中文网:http://www.fontawesome.com.cn/

使用Font Awesome图标需要下载和导入:

1.下载解压：http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip
2. 复制 font-awesome 目录到你的项目中
3. 在<head>处加载font-awesome.min.css如下。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
查看 案例 以获取 Font Awesome 的使用方法。

具体使用方法请看官网上面的案例。

Font Awesome完全兼容bootstrap

1.9 组件

Bootstrap之组件

弹窗：

使用SweetAlert for Bootstrap

1. 下载地址：https://github.com/lipis/bootstrap-sweetalert/releases
2.使用方法：
只需要导入dist里面的:sweetalert.min.js和sweetalert.css
弹窗:
swal("hello")
swal("hello","hi")
swal("hello","hi",success)

posted on 2022-03-15 22:13 Hans_Wang 阅读(166) 评论(0) 收藏举报

前端之Bootstrip

前端之Bootstrip

1. Bootstrip介绍

1.1 布局容器

1.2 栅格系统

1.2.1 栅格参数

1.3 排版

1.4 表格

1.5 表单

1.6 按钮

1.7 图片

1.8 图标

1.9 组件