首页bootstrap4模仿写一个百度搜索框

bootstrap4模仿写一个百度搜索框

时间: 2023-07-01 11:15:19 浏览: 101

好的，以下是一个简单的Bootstrap4模仿百度搜索框的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap4模仿百度搜索框</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入关键词"> <div class="input-group-append"> <button type="submit" class="btn btn-primary">搜索</button> </div> </div> </form> </div>  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 解释一下代码： - 在头部引入了Bootstrap4的CSS样式文件。 - 在body中创建了一个container容器，并在其中创建了一个form表单。 - 在form表单中创建了一个input-group输入框组件，包含了一个输入框和一个按钮。 - 使用form-inline类，让表单变成水平排列。 - 使用mt-5类，给container容器添加了一个上边距。 - 在底部引入了jQuery和Bootstrap4的JavaScript文件。这样我们就完成了一个简单的Bootstrap4模仿百度搜索框的示例。

阅读全文