404页面(Bootstrap)

404页面(Bootstrap)_第1张图片



说明:
btn btn-primary 使得按钮更加好看 ,btn-danger是红颜色的
form-control 使得输入框变得更加好看
form-inline 使得form-group元素变成行内元素
m-t 增加行间距


按钮可以用button标签,也可以用a标签,如下

<a href="index.html" class="btn btn-primary m-t">主页a>



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404页面title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet" >
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <base target="_self">
head>
<body >
<div class="middle-box text-center animated fadeInDown" >
    <h1>404h1>
    <h3 > 页面未能够找到!! !h3>
    <div >
        抱歉,页面好像去火星啦!
        <form class="form-inline m-t" role="form">
            <div class="form-group">
                <input type="email"  class="form-control" placeholder="请输入你需要查找的内容..." />
            div>
            <button type="submit" class=" btn btn-primary">搜索button>
        form>
    div>
div>

<script src="js/jquery.min.js" >script>
<script src="js/bootstrap.min.js">script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8">script>
body>
html>

FR:徐海涛(Hunk Xu) QQ技术群:386476712

你可能感兴趣的:(Bootstrap)