利用bootstrap实现简单页面设计

最近在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前端框架的简单基本使用

这个是我将来个人主页的欢迎页 ，后续页面尽情期待.·.·.·.·.

---

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet