python web开发(四): Bootstrap

1.初步了解

别人已经写好的CSS样式,我们可以直接引用

  • 下载
    Link-BootStrap

  • 解压,并放入到当前项目中
    python web开发(四): Bootstrap_第1张图片

  • 引用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">

head>
<body>
    <input type="button" value="原始按钮">
    <input type="button" value="bootstrap-1" class="btn btn-primary">
    <input type="button" value="bootstrap-2" class="btn btn-success">
    <input type="button" value="bootstrap-3" class="btn btn-danger">
    <input type="button" value="bootstrap-4" class="btn btn-danger btn-xs">
body>
html>

效果如下
在这里插入图片描述

2. 小试牛刀

构建一个导航界面

进入bootstrap文档
python web开发(四): Bootstrap_第2张图片
python web开发(四): Bootstrap_第3张图片

将代码拷贝到html文件中,并对部分代码进行定制化修改,如下图所示
python web开发(四): Bootstrap_第4张图片
效果如下
在这里插入图片描述

你可能感兴趣的:(前端,bootstrap,html)