python_web1（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

这是一个基于Python的Web开发项目，主要使用了HTML、CSS、Bootstrap、Javascript和JQuery等技术。以下是一个简单的HTML页面示例，展示了如何使用Bootstrap和JQuery来创建一个响应式网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Web 1 Example</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center">欢迎来到我的网站</h1>
        <div class="row">
            <div class="col-md-6">
                <h2>Bootstrap 组件示例</h2>
                <div class="alert alert-primary" role="alert">
                    这是一个警告示例
                </div>
                <button class="btn btn-primary">按钮</button>
            </div>
            <div class="col-md-6">
                <h2>JQuery 事件示例</h2>
                <button id="toggle-button" class="btn btn-primary">切换按钮可见性</button>
                <button id="hidden-button" class="btn btn-secondary" style="display: none;">隐藏的按钮</button>
            </div>
        </div>
    </div>
 
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#toggle-button').click(function(){
                $('#hidden-button').toggle();
            });
        });
    </script>
</body>
</html>

这个HTML页面使用了Bootstrap的警告框和按钮样式，以及JQuery的toggle方法来切换一个按钮的可见性。页面通过设置viewport来实现响应式设计，适应不同屏幕尺寸。这个示例展示了如何将Bootstrap和JQuery集成到项目中去，并简单演示了它们的功能。

python_web1（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

评论已关闭

推荐阅读