标签 bootstrap 下的文章

2024-08-10




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap+jQuery 示例</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">
        <button id="toggle-btn" class="btn btn-primary">Toggle Text</button>
        <div id="text-container">
            Hello, Bootstrap & jQuery!
        </div>
    </div>
 
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- 引入Bootstrap的JavaScript组件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#toggle-btn').click(function() {
                $('#text-container').toggle('slow');
            });
        });
    </script>
</body>
</html>

这个示例展示了如何使用Bootstrap和jQuery来创建一个简单的网页，其中包含一个按钮和一个可以通过点击按钮来切换（显示/隐藏）的文本区域。当按钮被点击时，相关的文本容器会以"slow"动画效果切换显示状态。这个示例简单明了，适合初学者快速了解如何将这两个库结合使用。

- 阅读更多 -

B045-jQuery案例实战&BootStrap

System

2024-08-10

所有,jquery

以下是一个使用jQuery和Bootstrap的简单案例，展示了如何结合这两个库来创建一个表单验证和提示的功能。

HTML部分:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和Bootstrap结合示例</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="your_script.js"></script>
</head>
<body>
    <div class="container mt-4">
        <form id="myForm">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" id="username" required>
                <div id="usernameFeedback" class="invalid-feedback">请输入用户名</div>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" class="form-control" id="password" required>
                <div id="passwordFeedback" class="invalid-feedback">请输入密码</div>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>
</html>

JavaScript部分 (your_script.js):




$(document).ready(function() {
    $('#myForm').submit(function(e) {
        e.preventDefault();
 
        var username = $('#username').val();
        var password = $('#password').val();
 
        if (username === '' || password === '') {
            $('#myForm').addClass('was-validated');
        } else {
            // 表单验证通过后的操作，例如发送数据到服务器
            alert('登录信息验证成功，用户名: ' + username);
        }
    });
});

这个简单的示例展示了如何使用jQuery来阻止表单的默认提交行为，并使用Bootstrap的was-validated类来展示验证反馈。如果用户名或密码为空，表单将不会被发送到服务器，而是显示一个错误提示。如果两者都不为空，则会弹出一个alert告知用户登录信息已经被验证。

- 阅读更多 -

基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件

System

2024-08-10

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Table with Pagination</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container mt-4">
        <table id="tableWithPagination" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <!-- 数据通过 JavaScript 动态加载 -->
            </tbody>
        </table>
        <div id="pagination"></div>
    </div>
 
    <script>
        $(document).ready(function() {
            var currentPage = 1;
            var itemsPerPage = 10;
 
            function fetchData(page) {
                // 这里应该是一个向服务器发送请求获取数据的函数
                // 为了示例，我们使用一个静态的数据
                var data = {
                    "items": [
                        // ... 数据项
                    ],
                    "total": 100 // 总数据量
                };
                return data;
            }
 
            function renderTable(data) {
                var html = '';
                var items = data.items;
                for (var i = 0; i < items.length; i++) {
                    html += '<tr>' +
                                '<td>' + (i + 1) + '</td>' +
                                '<td>' + items[i].name + '</td>' +
                                '<td>' + items[i].email + '</td>' +
                            '</tr>';
                }
                $('#tableWithPagination tbody').html(html);
            }
 
            function renderPagination(data) {
                $('#pagination').bootpag({
                    total: Math.ceil(data.total / itemsPerPage),
                    page: currentPage,
                    maxVisible: 5,
                    leaps: true,
                    firstLastUse: true,
                    first: '首页',
                    last: '尾页',

System

2024-08-10

所有,ajax

要实现一个web页面的瀑布流加载更多的功能，可以使用以下技术栈：

使用Masonry库来创建瀑布流布局。
使用imagesLoaded库确保图片加载完成后再布局瀑布流。
使用Bootstrap进行样式和响应式设计。
使用Ajax来异步加载更多的内容。

以下是一个简单的示例代码：

HTML:




<div class="container">
  <div class="grid">
    <!-- 内容动态生成，初始为空 -->
  </div>
  <div class="load-more">
    <button class="btn btn-primary" id="loadMoreBtn">加载更多</button>
  </div>
</div>

CSS:




.grid {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}
 
.grid .item {
  break-inside: avoid;
  margin-bottom: 10px;
}
 
.load-more {
  text-align: center;
  margin-top: 20px;
}

JavaScript:




$(document).ready(function() {
  var $grid = $('.grid').masonry({
    itemSelector: '.item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
 
  $grid.imagesLoaded().progress(function() {
    $grid.masonry('layout');
  });
 
  $('#loadMoreBtn').click(function() {
    $.ajax({
      url: 'your-api-endpoint', // 替换为你的API端点
      type: 'GET',
      data: {
        // 你可以添加任何需要的参数
      },
      success: function(data) {
        var $items = $(data).find('.item').css({ opacity: 0 });
        $grid.append($items).masonry('appended', $items);
        $items.imagesLoaded().progress(function() {
          $grid.masonry('layout');
          $items.fadeTo(500, 1); // 淡入效果
        });
      }
    });
  });
});

确保替换 'your-api-endpoint' 为你的API URL，并根据你的API响应格式调整成功回调函数中的代码。这个示例假设你的每个内容块有 .item 类，并且通过Ajax请求获取更多内容。

System

2024-08-09

所有,jquery

Bootstrap 整合指的是将Bootstrap 框架集成到你的项目中。以下是一个简单的步骤说明和示例代码：

确保你的项目中已经引入了jQuery库，因为Bootstrap 框架依赖于jQuery。
从Bootstrap官网下载Bootstrap的CSS和JavaScript文件，或者使用CDN链接。
在HTML文件中引入这些文件。

以下是一个HTML文件的示例，展示了如何引入Bootstrap和jQuery：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 整合示例</title>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
 
<div class="container">
    <h1>Bootstrap 整合示例</h1>
    <button class="btn btn-primary">按钮</button>
</div>
 
<!-- 引入Bootstrap JavaScript 插件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，我们使用了Bootstrap 3的CDN链接。请确保你使用的是你需要的Bootstrap版本对应的正确链接。如果你下载了Bootstrap文件，你可以通过本地路径来引入它们。

注意：Bootstrap 4 和 Bootstrap 5 的使用方式类似，但可能需要不同的依赖版本的jQuery。Bootstrap 4 开始不再依赖于jQuery，而是使用自己的实用工具函数库。

- 阅读更多 -

前端已死? Bootstrap--CSS&组件

System

2024-08-09

所有,css

前端未死，只是发生了变化。Bootstrap是一款流行的前端框架，它提供了一套响应式布局系统，包括CSS样式和一系列组件，用于快速开发Web界面。

如果你想使用Bootstrap进行开发，你可以按照以下步骤操作：

引入Bootstrap CSS文件：




<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

引入Bootstrap JavaScript插件（可选，视组件需要而定）：




<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

使用Bootstrap的CSS类和组件来构建页面：




<div class="container">
  <h1>Bootstrap 示例</h1>
  <button type="button" class="btn btn-primary">按钮</button>
</div>

以上是一个简单的Bootstrap使用示例。你可以通过添加更多的HTML标签和Bootstrap提供的类来定制页面的布局和样式。

请注意，Bootstrap版本会更新，因此CDN链接中的版本号可能会变化。始终参考最新的官方文档以获取最新的链接。

- 阅读更多 -

实战Flask+BootstrapTable最简动态表头及数据(ajax方法)

System

2024-08-09

所有,ajax




from flask import Flask, render_template, request, jsonify
import json
import random
 
app = Flask(__name__, static_folder='static', template_folder='templates')
 
# 模拟数据库
data = {
    'rows': [{'id': i, 'name': 'Name ' + str(i), 'price': random.randrange(1, 101)} for i in range(1, 10)]
}
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/getdata', methods=['POST'])
def get_data():
    # 获取请求参数
    iDisplayLength = request.form.get('iDisplayLength', 10)
    iDisplayStart = request.form.get('iDisplayStart', 0)
    sSearch = request.form.get('sSearch', '')
 
    # 过滤和搜索
    filtered_data = [row for row in data['rows'] if sSearch in row['name']]
 
    # 分页
    page_data = filtered_data[int(iDisplayStart):int(iDisplayStart) + int(iDisplayLength)]
 
    # 构造返回的JSON数据
    response_data = {
        'iTotalRecords': len(filtered_data),
        'iTotalDisplayRecords': len(filtered_data),
        'aaData': page_data
    }
 
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

这段代码实现了一个简单的Flask服务器，它使用Bootstrap Table的AJAX方法来获取数据。服务器端使用Flask路由处理AJAX请求，并返回JSON格式的数据。在实际应用中，数据源可以是数据库或其他API。这个例子主要用于演示如何与前端交互，并且模拟了分页和搜索功能。

- 阅读更多 -

使用bootstrap+jQuery实现简单的学生管理系统增删改查功能

System

2024-08-08

所有,jquery

以下是一个简单的学生管理系统示例，使用了Bootstrap和jQuery来增强用户界面和简化JavaScript代码。

HTML 部分:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container mt-4">
    <button class="btn btn-success" id="addStudentBtn">添加学生</button>
    <table class="table mt-4" id="studentsTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 学生数据将会被插入这里 -->
        </tbody>
    </table>
</div>
 
<!-- 添加学生的模态框 -->
<div class="modal fade" id="addStudentModal" tabindex="-1" role="dialog" aria-labelledby="addStudentLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addStudentLabel">添加学生</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="studentName">姓名</label>
                    <input type="text" class="form-control" id="studentName" placeholder="学生姓名">
                </div>
                <div class="form-group">
                    <label for="studentAge">年龄</label>
                    <input type="number" class="form-control" id="studentAge" placeholder="学生年龄">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-

- 阅读更多 -

Django+BootStrap下的民居系统开发

System

2024-08-08

所有,jquery

民居系统开发涉及的技术栈包括Django和Bootstrap，以下是一个简单的示例，展示如何使用Django创建一个视图，并在前端使用Bootstrap进行样式设计。

首先，确保你的环境中已安装Django和bootstrap。

在Django项目中创建一个新的app，例如residential_system，并在该app的views.py中创建一个视图：




from django.shortcuts import render
 
def residential_system(request):
    return render(request, 'residential_system.html')

在residential_system app的templates目录下创建一个HTML模板文件residential_system.html，并添加Bootstrap样式和内容：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Residential System</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="display-4 text-center">Welcome to Residential System</h1>
        <div class="row">
            <!-- 这里可以添加更多的Bootstrap样式的组件 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在Django的urls.py中添加路由：




from django.urls import path
from residential_system.views import residential_system
 
urlpatterns = [
    path('residential/', residential_system, name='residential_system'),
]

这样就可以通过访问对应的URL来查看使用了Bootstrap样式的民居系统页面。

System

2024-08-08

所有,html

以下是一个简化的JSP+Servlet旅游管理系统的代码示例，包括用户登录功能的实现。请注意，为了简洁和安全，这里只展示了核心代码片段，并且省略了数据库连接和查询的细节。




// UserServlet.java
@WebServlet("/user")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        if ("login".equals(action)) {
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            User user = UserService.login(username, password);
            if (user != null) {
                // 登录成功，保存用户信息到session并重定向到主页
                request.getSession().setAttribute("user", user);
                response.sendRedirect("index.jsp");
            } else {
                // 登录失败，保存错误信息到request属性并跳转回登录页面
                request.setAttribute("error", "登录失败，用户名或密码错误");
                request.getRequestDispatcher("login.jsp").forward(request, response);
            }
        }
    }
}
 
// UserService.java
public class UserService {
    public static User login(String username, String password) {
        // 这里应该是对数据库的查询操作，假设已经有了User对象
        // User user = queryDatabase(username, password);
        User user = null; // 假设没有找到用户
        if ("admin".equals(username) && "password".equals(password)) {
            user = new User();
            user.setUsername(username);
            // 设置其他用户信息...
        }
        return user;
    }
}
 
// User.java
public class User {
    private String username;
    // 其他用户信息...
 
    // getter和setter方法...
}
 
// login.jsp
<form action="user?action=login" method="post">
    用户名: <input type="text" name="username" /><br />
    密码: <input type="password" name="password" /><br />
    <input type="submit" value="登录" />
</form>
 
<c:if test="${not empty error}">
    <p style="color: red">${error}</p>
</c:if>

在这个简化的例子中，UserServlet处理登录请求，UserService模拟了用户登录的服务，User类保存用户信息。登录表单提交到UserServlet，并通过action=login参数指定登录操作。如果登录成功，将用户信息保存到session并重定向到主页；如果登录失

- 阅读更多 -