bootstrap4 建立一個簡單頁面
阿新 • • 發佈：2018-11-06
第一次嘗試用前端框架寫了一個簡單頁面。最重要的應該是先好好讀一遍使用文件啊啊。先貼一波官方連結：
可以少走很多彎路_(:з」∠)_
另外模板這個東西新手們開啟看看也可以學到很多
https://v4.bootcss.com/docs/4.0/examples/
先貼一個預覽圖：
頁尾還有一點內容
以下是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: 頁面由一個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;
}