最近在FreeCodeCamp上重温网页前端，并且也学习了一些新东西，这个便是用bootstrap制作的一个简单的前端页面。
代码发布在codepen上，点击访问：BlogDemo
上个图，虽然比较简单，但是用了bootstrap框架后适配性还是不错的，手机上访问没问题。
下面对代码进行一些详细讲解啦~(≧▽≦)/~
因为没有动态页面所以没有用到js，css用的也不多，主要是用的bootstrap的一些类
先是html（里面的文字瞎诌的）：
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<div class="container">
<div class="jumbotron">
<h1 class="text-center header">YinyouPoet</h1>
<h4 class="text-center motto">Coding out a piece of poem</h4>
<div class="col-xs-12 img-show">
<img src="https://images.unsplash.com/photo-1498019559366-a1cbd07b5160?dpr=1&auto=format&fit=crop&w=1500&h=1014&q=80&cs=tinysrgb&crop=" class="carousel-inner img-responsive img-rounded" />
<div class="caption text-center">
Only Coding That Cannot be Stopped!
</div>
</div>
<div class="col-xs-12 content text-center">
<h5 class="text-center poem-title">横刀立马，已近黄昏</h5>
<p>夜雨悄悄风慢慢，浮尘缕缕泪盈盈。<br/> The night is silent while the wind is slowly，the sand flies and tears are in the eye.</p>
<p>
飞云转腾劲耸生，乱石击空萧意瑟。</br>
The cloud moves and there's some power appears,stones brust into the sky and make the music turns sad.
</p>
<p>
不知天上几回度，却道人间七月春。</br>
Times goes by,the world is Spring in July.
</p>
<p>谁道炎凉不觅踪，万般归若千秋斜。</br>
Who said that we can't find the hot and cold,everything can be involved into the autumn.
</p>
<br><br>
<footer><cite>Welcome to come to know me</cite></footer>
<footer><cite><a href="#" class="link">-->Enter My Blog<--</a></cite></footer>
</div>
</div>
<hr>
<footer class="text-center">
<p>Created By <a href="#">YinyouPoet</a>.</p>
</footer>
</div>代码都挺好理解的，讲一些类的作用吧。
1、container和container-fluid不一样，bootstrap类的其他部分都需要放在具有这两者之一的div里面，但是有区别，container是固定宽度的，而container-fluid则是自适应整个屏幕，不过两者都具有自适应性，否则在手机上显示就不会那么正常了。
2、jumbotron：看见那块灰色的没，那就是jumbotron，网上说法呢这个是超大屏幕，听起来怪怪的，其实作用主要是：增加标题大小、增加外边距。参考的：Bootstrap
其他的没什么好解释的了，有不明白的可以给我留言，下面放的是css代码
body{
margin-top:60px;
}
.header{
font-family:Lobster;
color:#86473f;
}
.img-show{
background-color:#fff;
padding:5px 5px 5px 8px;
border:1px solid #fff;
border-radius:10px;
}
.motto{
color:#a96360;
font-family:'Indie Flower', cursive;
}
.content{
margin-top:20px;
}
.poem-title{
font-family:隶书;
}
.link{
}
这些都是些简单样式也不用多解释了，对于bootstrap还没入门的可以先看看我的前一篇博客：bootstrap前端框架的简单基本使用
这个是我将来个人主页的欢迎页 ，后续页面尽情期待.·.·.·.·.