bootstrap4 创建一个简单页面

第一次尝试用前端框架写了一个简单页面。最重要的应该是先好好读一遍使用文档啊啊。先贴一波官方链接：

http://www.bootcss.com/

可以少走很多弯路_(:з」∠)_

另外模板这个东西新手们打开看看也可以学到很多

https://v4.bootcss.com/docs/4.0/examples/

先贴一个预览图：

页脚还有一点内容

扫描二维码关注公众号，回复： 3953362 查看本文章

以下是html中的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Blog</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <link href="css/messenger.css" rel="stylesheet">    
    <link href="css/messenger-theme-future.css" rel="stylesheet">    
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="css/blog.css" rel="stylesheet">
    <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container-fluid">
      <header>
        <div class="row">
          <p class="col-6 blog-header-left blog-header-logo text-center">Your Name</p>
          <div class="col-6 blog-header-right text-center">
            <a class="text-muted" href="#">Home</a>
            <a class="text-muted" href="#">About</a>
            <a class="text-muted" href="#">Contact</a>
          </div>
        </div>

        <div class="row col-12 blog-bar">
          <div class="col-8 mt-3 text-right">
            <a class="text-muted" href="signin.html">signin</a>
          </div>

          <div class="col-4">
            <form class="form-inline mt-2">
              <input type="text" class="form-control" name="search">
              <input type="button" class="btn btn-primary" name="dosearch" value="search">
            </form>
          </div>
        </div>    
      </header>

      <div class="card-deck-wrapper container">
        <div class="card-deck">
          <div class="card">
           <img class="card-img-top" src="images/blog1.jpg" alt="Card image">
            <div class="card-block text-center">
              <h4 class="card-title">Title</h4>
              <p class="card-text">2018-3-28</p>
            </div>
            <div class="card-footer">The content of the article.</div>
          </div>
          <div class="card">
            <img class="card-img-top" src="images/blog1.jpg" alt="Card image">
            <div class=" card-block text-center">
              <h4 class="card-title">Title</h4>
              <p class="card-text">2018-3-28</p>
            </div>
            <div class="card-footer">The content of the article.</div>
          </div>
          <div class="card">
            <div class="card-header">
              <h4>My Events</h4>
            </div>
            <div class="card-block card-list">
              <ul>
                <li><a href="#">study</a></li>
                <li><a href="#">research</a></li>
                <li><a href="#">competiton</a></li>
                <li><a href="#">travel</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="foot-wrap container-fluid">
      <div class="container">
        <div class="row">
          <div class="col-4">
            <div class="widget">
              <h4 class="title"><i class="fa fa-home"></i> About</h4>
              <ul>
                <li><a href="#">ustc</a></li>
              </ul>
            </div>
          </div>
          <div class="col-4">
            <div class="widget">
              <h4 class="title"><i class="fa fa-desktop"></i> Friendly links</h4>
              <ul>
                <li><a href="#">ustc</a></li>
                <li><a href="#">ustc</a></li>
              </ul>
            </div>
          </div>
          <div class="col-4">
            <div class="widget">
            <h4 class="title"><i class="fa fa-envelope"></i> Contact me</h4>
              <ul>
                <li><a href="#">mobile:xxxxxx</a></li>
                <li><a href="#">email:xxxxx@</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <div class="copyright">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <span>Copyright@</span>  
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

页面由一个header和一个卡片组加一个页脚组成。header的布局貌似缩放起来就有点不太好看了。

其中用到了fontawesome的一些图标非常好用哦。

搜索框用了一个form-inline，不过有点奇怪，它在div里左对齐了，加上text-left或者pull-left也都没办法呢，只好设了一个col-4。bootstrap的col和mt的网格布局非常友好呢。

贴一下blog.css，写得不太好：

body {
  width: 100%;
}
.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
.blog-header-logo {
  font-family: "微软雅黑", "Times New Roman";
  font-size: 2.5rem;
  font-weight: 100;
  color: grey;
}
.text-muted {
  font-size: 1.00rem;
  padding: 10px;
}
.blog-header-left {
  margin-top: 50px;

}
.blog-header-right {
  margin-top: 80px;
}

.blog-bar {
  padding: 0;
  margin: 0;
  background-color: #E8E8E8;
  clear: both;
  width: 100%;
  height: 60px;
}

.card {
  margin: 20px;
}

.btn-primary {
  background-color: #4682B4;
  border-color: #4682B4;
}
.card-list {
  margin: 20px;
  font-size: 1.2em;
}

.foot-wrap {
  background: #202020;
  padding: 35px 0 0;
  color: #959595;
  margin-top: 64px;
}
.widget {
  margin-bottom: 30px;
  padding: 0px 30px;
}
.widget a {
  color: grey;
}
.copyright {
    background: #111;
    font-size: 13px;
    text-align: center;
    color: #555555;
    padding: 20px;
}

header部分的css有一点点瑕疵嘻嘻。

bootstrap4 创建一个简单页面

猜你喜欢