python网站创建016:BootStrap

什么是BootStrap?:是一个别人写好的javascript和css的代码,如果在开发项目的时候省点事,就可以在它的基础上来修改使用

使用教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

下载:https://getbootstrap.net/

下载之后解压,解压之后可以随意打开一个文件,比如css文件,带min字样的是压缩版, 不带的是生产版, 他们之间的区别就是文件大小不同

然后将解压目录放到项目路径下, 任何路径都行

引入:

<!DOCTYPE html>
<html>
<head>
    <title>初识:JavaScript</title>
    <meta charset="UTF-8">

    <!--css引入方法:引入min版本或非min版本都行-->
    <link rel="stylesheet" href="../file/bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>

    <!--js引入方法: 因为bootstrap 依赖于jquery, 所以需要提前引入jquery才能使用bootstrap-->
    <script src="../file/jquery-3.7.1.min.js"></script>
    <script src="../file/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

使用:在使用之前, 需要看一下官方文档

常见的BootStrap样式:

1. 容器:

  1.1: class="container"    容器居中

  1.2 :class="container-fluid"    平铺, 就是不加任何样式

  1.3:导航效果

2. 栅格:将页面分为12份。

 BootStrap提供了一下4种栅格方式, 效果是一样的, 那为什么要4种呢?不同的栅格方式, 有不同的范围值,也就是当屏幕小于多少像素时, 栅格会重叠,相当于失效

lg:小于1200像素失效

    <div class="col-sm-1"></div>
    <div class="col-sm-3"></div>

md:小于960像素失效

    <div class="col-md-1"></div>
    <div class="col-md-3"></div>    

sm:小于768像素失效

    <div class="col-sm-1"></div>
    <div class="col-sm-3"></div>  

xs:根据屏幕自适应,永不失效

    <div class="col-xs-1"></div>
    <div class="col-xs-3"></div>  

补充,占位:也叫列偏移,也就是可以实现左边占3份, 右边9份给我空着类似的效果

<div class="offset-md-9 col-md-3" style="background: yellow">div2</div>

 3. 面板和应用

<body>

<div class="panel panel-default">
    <div class="panel-heading">
        不带 title 的面板标题
    </div>
    <div class="panel-body">
        面板内容1
    </div>
    <div class="panel-body">
        面板内容2
    </div>
    <div class="panel-body">
        面板内容3
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容1
    </div>
    <div class="panel-body">
        面板内容2
    </div>
    <div class="panel-body">
        面板内容3
    </div>
</div>

</body>

4. 表格和按钮

<body>

<table class="table table-hover">
    <caption>悬停表格布局</caption>
    <thead>
        <tr>
            <th>名称</th>
            <th>城市</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小红</td>
            <td>上海</td>
            <td>
          <!--btn-sm 是调节大小的作用-->
<a class="btn btn-warning btn-sm">删除</a> <a class="btn btn-info btn-sm">修改</a> </td> </tr> <tr> <td>小明</td> <td>深圳</td> <td> <a class="btn btn-warning btn-sm">删除</a> <a class="btn btn-info btn-sm">修改</a> </td> </tr> <tr> <td>小兰</td> <td>广西</td> <td> <a class="btn btn-warning btn-sm">删除</a> <a class="btn btn-info btn-sm">修改</a> </td> </tr> </tbody> </table> </body>