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

小序

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

目录

  • 小序
  • 正文
    • bootstrap用法
      • 下载
      • 导入
      • 示例
    • 应用——搜索功能实现
  • 结束语

正文

继之前的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">Primarybutton>
<button type="button" class="btn btn-secondary">Secondarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-light">Lightbutton>
<button type="button" class="btn btn-dark">Darkbutton>

按钮样式
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>

CSS——利用bootstrap实现搜索界面_第1张图片

应用——搜索功能实现

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

DOCTYPE html>
<html>
<head>
    <title>Searchtitle>
    <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;">fancymengh1>
    <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>

搜索页面实现如下
CSS——利用bootstrap实现搜索界面_第2张图片
result.html

DOCTYPE html>
<html>
<head>
    <title>Resulttitle>
    <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;">fancymengh1>
    <table id="data-table" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>First_wordth>
                <th>wordth>
                <th>explainth>
            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>

搜索应用示例
本应用搜索采用了模糊索引
在这里插入图片描述
在这里插入图片描述
可以看到,上面的效果基本上都依靠了bootstrap 来实现
输入框、链接(以按钮形式显现)
最终结果以表格形式展现(渐变色)上面的bootstrap 链接有相关的形式

本文主要是介绍css 的相关内容,就不再多言相关的其他应用了
以后可更新相关的内容时会再次提及此项目
对全部内容感兴趣的友友们,欢迎评论或者私信
也可关注后续的内容,会对文本处理、数据库内容(MySQL)以及前后端搭建的实现会陆续发文
相关的资源会在日后同步

结束语

向生活说你好,
向当下说你好,
向自己说,
You can do it !

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