CSS利用bootstrap实现搜索界面
目录
CSS——利用bootstrap实现搜索界面
小序
纵有风情万种，依然情有独钟
生活的样子，大抵是不一样的
看清风拂过，看人潮汹涌
向生活说
你好！
目录
正文
继之前的CSS内容，大抵上阐述了简单的用法
今天为了更好地实现网页的设计，我们可以利用bootstrap实现相关的内容
不管是简单的按钮、表格，还是布局、导航… 可以说，这十分便利我们的代码编写
我们仅仅需要导入相关的css和js 文件，即可应用相关的样式内容
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>搜索应用示例
本应用搜索采用了模糊索引
可以看到，上面的效果基本上都依靠了bootstrap 来实现
输入框、链接（以按钮形式显现）
最终结果以表格形式展现（渐变色）上面的bootstrap 链接有相关的形式
本文主要是介绍css 的相关内容，就不再多言相关的其他应用了
以后可更新相关的内容时会再次提及此项目
对全部内容感兴趣的友友们，欢迎评论或者私信
也可关注后续的内容，会对文本处理、数据库内容（MySQL）以及前后端搭建的实现会陆续发文
相关的资源会在日后同步
结束语
向生活说你好，
向当下说你好，
向自己说,
You can do it !