python-Bootstrap框架

最新推荐文章于 2024-07-19 10:21:28 发布

淋巴不想动

最新推荐文章于 2024-07-19 10:21:28 发布

阅读量5.4k

点赞数

分类专栏： python Bootstrap

本文链接：https://blog.csdn.net/weixin_43067754/article/details/88047085

版权

文章目录

1.什么是Bootstrap框架?
2.学习网站
3.新闻网站注册登陆界面
- 1)实现登陆界面
- 2)实现注册界面

1.什么是Bootstrap框架?

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、
CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

2.学习网站

- 官方中文文档: https://v3.bootcss.com/
- 菜鸟教程案例: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

3.新闻网站注册登陆界面

最终样式：
在这里插入图片描述

1)实现登陆界面

首先下载bootstrap包，我下的是bootstrap3.3.7
链接: https://pan.baidu.com/s/1BkBea0hzX_6m1vWQahg70A 提取码: thc5
解压后自动形成三个目录，我们可以直接导入这些样式使用
在这里插入图片描述
登陆界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--倒入本地的BOotstrap样式, 也可以倒入网络上的；-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        .navbar{
            font-size: 130%;
            background: whitesmoke;
            margin-top: 10px;
            padding-top: 5px;
            box-shadow: 2px  2px 2px 2px lightgray;
            height: 60px;



        }


    </style>

</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-