bootstrap4 创建一个简单页面
2018-03-29 21:11
381 查看
第一次尝试用前端框架写了一个简单页面。最重要的应该是先好好读一遍使用文档啊啊。先贴一波官方链接：
http://www.bootcss.com/
可以少走很多弯路_(:з」∠)_
另外模板这个东西新手们打开看看也可以学到很多
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: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有一点点瑕疵嘻嘻。
http://www.bootcss.com/
可以少走很多弯路_(:з」∠)_
另外模板这个东西新手们打开看看也可以学到很多
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: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有一点点瑕疵嘻嘻。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 初识Bootstrap及制作一个简单的页面
- Python web入门：Django学习与实践二（简单页面实现和创建一个模板）
- Django学习笔记（二）创建一个简单页面
- 创建一个简单注册页面步骤
- IronPython for ASP.NET：使用IronPython创建一个简单的Web页面
- 使用tornado创建一个简单的图书介绍页面
- 如何使用CSS栅格布局创建一个简单页面布局
- bootstrap 一个简单的登陆页面
- 利用easyui创建一个简单的登录页面
- ASP动态网页创建一个简单页面
- 安卓学习笔记：2:用EditView创建一个简单的注册页面
- bootstrap入门-做一个简单的页面
- 用bootstrapt写一个响应式的简单页面
- 使用Node.js创建一个简单的本地页面服务器
- ASP动态网页创建一个简单页面
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之二
- 使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参
- 创建一个简单的win32 应用窗口程序
- bootstrap创建登录注册页面
- 【转帖】驱动开发之一 --- 创建一个简单的设备驱动 【译文】