CSS——利用bootstrap实现搜索界面

fancymeng

已于 2023-09-05 18:38:19 修改

阅读量1.7k

点赞数

分类专栏： css 文章标签： css bootstrap 前端 html

于 2023-09-05 18:35:43 首次发布

本文链接：https://blog.csdn.net/Fancymeng/article/details/132697568

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小序

纵有风情万种，依然情有独钟
生活的样子，大抵是不一样的
看清风拂过，看人潮汹涌
向生活说
你好！

正文

继之前的CSS内容，大抵上阐述了简单的用法
今天为了更好地实现网页的设计，我们可以利用bootstrap实现相关的内容
不管是简单的按钮、表格，还是布局、导航… 可以说，这十分便利我们的代码编写
我们仅仅需要导入相关的css和js 文件，即可应用相关的样式内容

bootstrap用法

下载

想要使用bootstrap ，首先需要下载相关的内容
下载链接如下： bootstrap下载
可根据需要进行选择，可只要css和js 的文件，也可选择全部的文件

导入

// 导入css、js
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<script src="/static/js/bootstrap.min.js"></script>

示例

按钮

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

按钮样式
layout

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

布局情况

应用——搜索功能实现

本次是借助bootstrap 实现一个类似于百度搜索功能的页面
下面我们老规矩，直接步入正题，以代码展现功能
搜索页面——search.html

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }

        .container input[type="text"] {
            width: 800px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">fancymeng</h1>
    <form method="POST">
        <div class="container">
            <input type="text" class="text" name="query" placeholder="Enter your query">
            <a id="submit" href="/data" class="btn btn-primary" role="button">搜索</a>
        </div>
    </form>
    <script>
        document.getElementById('submit').addEventListener('click', function() {
          var query = document.getElementsByName('query')[0].value;
          this.href = '/data?query=' + query;
        });
    </script>
</body>
</html>

搜索页面实现如下

result.html

<!DOCTYPE html>
<html>
<head>
    <title>Result</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
</head>
<body>
    <h1 style="text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">fancymeng</h1>
    <table id="data-table" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>First_word</th>
                <th>word</th>
                <th>explain</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ row[0] }}</td>
                <td>{{ row[1] }}</td>
                <td>{{ row[2] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>