分类目录归档:碎片生活

QQ截图20131024151605

快速简单上手Bootstrap

本文假设你就懂一点点html,高手请跳过。

Bootstrap是什么

Bootstrap是几个牛逼闪闪的twitter工程师为减少web开发重复工作量的一个框架,大白话就是他们做好了所有css的装饰,你只要调用对应的标签(class name),就可以写出一个漂亮的网站,跟着下面的例子,我将带你快速建立一个页面。

开始使用

在这里下好bootstrap,解压

http://getbootstrap.com/2.3.2/getting-started.html   

在解压好的根目录里面创建新建的页面,这里例子为index.html

注意:为了显示中文不是乱码,请确认的你文本编辑器保存的格式是UTF-8 !

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<title>网站标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

<link href=”css/bootstrap.css” rel=”stylesheet” media=”screen”>这一句是调用bootstrap的样式表,这样就可以用bootstrap了!

这两句请确保为body的最后两行:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

 

接下来我们要用内置的框架实现以下的页面布局:

布局

用container标签,存放内容

container它可以把内容居中,然后设置好与其他距离的padding.相当于一个放内容的容器.

把下面片段加入<body></body>里:

<div class="container">
</div>

  • 添加网站标题

在container里添加如下代码:

<h1>第一次用Bootstrap</h1>

在浏览器可以看到出现标题了,但是还没有到激动的时刻.

  • 添加导航栏

在Bootstrap里面只要打class名为navbar就可以制作导航栏了,导航栏有几种形式(固定,浮动,顶部,底部 etc),详情见官网文档。导航栏里的内容在<div class=navbar-inner></div>里添加,每一个选项放在<ul></ul>标签里即可。把下面代码放到建立的container里面,在刚才建立的标题下面

<div class="navbar navbar-static-top" id="nav">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">label1</a><li>
              <li><a href="#">label2</a><li>
              <li><a href="#">label3</a><li>      
          </ul>        
        </div>     
      </div>
 </div>

一个导航栏就做好了,保存文件,在浏览器刷新一下试试!

  • 放入宣传内容区域(我自己起的名字),还有按钮

Bootstrap把这里的class叫 hero-unit,把下面的内容继续放进container里面放在navbar下面:

<div class="hero-unit">
    <h1>宣传区域</h1>

    <p>我们要通过bootstrap做一个非常碉堡的产品页面。这将非常有趣。</p>

    <a href="#" class="btn btn-large btn-info">我们开始!</a>
</div>

class btn可以让它以按钮的样式显示,btn-info是绿色的按钮,更多设置看官网文档。

打开浏览器看看效果!

  • 加入左侧导航列

根据前面设想的布局图,左边放左导航栏,右边内容区域。这要把一个container的宽度,分为两个不均等的小块。下面看看用bootstrap怎么实现。Bootstrap里布局用网格(grid system)建立每一个小模块,以一格为最小单位计数来计量宽度,最大有12格,长度如下:

1

在本例里,我们选择宽度为3和宽度为8的两列,建立方式如下:

就像画表格一样我们先建立一个class为row(行)的div,然后里面两个不同长度的格子来划分这个row,spanN N代表网格数N取值为1~12。这里span3我们放入左导航列(表示导航栏的宽度为3个格)

 <div class="row">

         <div class="span3">

         </div>
         <div class="span8">

         </div>
</div>
把下面代码加入,刚才建立的<div class=”span3″>中:
<ul class="nav nav-list">
    <li class="nav-header">关于我们</li>
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">我们的客户</a></li>
    <li><a href="#">我们的服务</a></li>
    <li><a href="#">联系我们</a></li>
    <li class="nav-header">品牌赞助商</li>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo!</a></li>
    <li><a href="#">Bing</a></li>
    <li><a href="#">Microsoft</a></li>
</ul>

下面再span8里加入文章内容:(网章内容随机摘自网络)

<h3>我们开始</h3>

<p>“之所以我们的生活里充满了对生活的抱怨和吐槽,那是因为我们的生活里没什么大事儿。倘若有大事情等着我们去解决,怎么会有那闲工夫抱怨?”</p>

<p> 
我大学时只很努力的学习英语,别的什么事儿都没干,尽管我的水平并没有北大清华的同学那么好,但是我努力向他们靠近。他们考什么我就考什么,他
们学什么我不知道,我就把图书馆的所有英语教材和书籍都借出来挨个看。毕业聚会的时候,一个同学翻着白眼跟我说:“你有什么啊,不就是英语好点才有个好工
作吗?”哦,是的,就因为我英语好点,所以我有个好工作,而你毕业的时候什么都没有。我不是骄傲,而是想说,只要你努力,只要你肯下功夫每天变好一点点,
尽管你未来可能还是什么都没有,但有哪怕一丁点优势就不会饿死人,这世上最不会贬值的投资就是为自己努力。</p>

<h3>Coursera 今天宣布又有13家院校加入</h3>

<p>这13个院校来自11个国家,包括中国、丹麦、英国、意大利、荷兰跟俄罗斯等。</p>

<p>根据 Coursera 最新提供的数据图表显示, Coursera 上面的课程老师平均每个人带了7,204个学生。课程视频共被浏览了3亿多次。
</p>

刷新看看应该很棒吧!

添加底部的三个小版块

我们想在最下面加入三个小介绍注脚,把一个row分成3个span4等宽的区域。实现代码如下:

<div class="row">

<div class="span4">

        <h4 class="muted text-center">客户群</h4>

        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

        <a href="#" class="btn"><i class="icon-user"></i> 客户信息</a>

    </div>

    <div class="span4">

        <h4 class="muted text-center">了解雇员</h4>

        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

        <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> 雇员信息</a>

    </div>

    <div class="span4">

        <h4 class="muted text-center">找到我们</h4>

        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

        <a href="#" class="btn btn-info">连线</a>

    </div>

</div>

贴入前面的代码,刷新你的浏览器,Awesome!发现这次按钮里有了图标。

n3

看代码多了<i></i>的标签,bootstrap里面提供各种漂亮的这种图标,有黑白两色的,更多选项看官网文档.

添加footer

我们把我们的copyright放在这里:

<hr />
<div class="footer">
© 2013 built with Bootstrap @小伙伴
</div>

大功告成!

QQ截图20131024151605

剩下的去看官方文档吧!

如果想看中文版点这里 中文文档

幸福不在下一站

 以前特别喜欢One more struggle,and you will be free这句话,总可以感觉那个让人期盼的自由终就在不远的地方,只要手再伸远点,步再跨大点…..幸福和自由好像都在下一个台阶。可能你又过这样的感觉,考完高考你就轻松了,到大学又是工作了就轻松了,到工作又变成了退休就轻松了,好像幸福和自由永远都在前面,我们努力的奔向那个看似很美好的明天。

061293230328202_change_quyl0c73_b但是问题在于,每次到达一个阶梯的幸福满足感是短暂的,又要开始奔向下一个台阶了 。所以这句座右铭应该改一下变成,One more struggle,and I am free.理解为我是自由的,我在struggle。struggle本身就是一种快乐和自由的方式,在为了一个还不太清晰的明天而努力,为了一个看似幼稚的梦想,我在针扎我在努力同时我也是自由的。就像这样YOUNG AND FREE !

内蒙古沙漠之行