Jul 1

在慕课网学习bootstrap

题记:前端猿正在学习进化过程中……

最近想学bootstrap,因为bootstrap用起来实在是太方便.

然后到处找学习资源,官方文档很详细,但是却不适合初学者,去过极客学院,最后在慕课网上找到了很好的学习资源.

令我收获最大的就是慕课网的视频中有一个实例教程,然后我照着教程里面把所有代码给搞了一遍,收获颇丰. 慕课网教程地址

使用bootstrap

其实这一步应该是最简单的了.可以直接从官网上下载,然后本地引用. 我搬运一下现在的最新版本v3.3.5的下载地址.

然后在html里面引用bootstrap.css或者bootstrap.min.css文件.这是最基本的样式表.可以做一些基础布局.

如果需要使用插件的话,需要引用bootstrap的js文件.由于bootstrap的javascript基于jQuery,所以在引入bootstrap.js或者bootstrap.min.js之前要先引用jquery.js.

当然也可以使用cdn服务,直接在html文件里面用link和script引入.

1
2
3

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

这个代码使用的百度的cdn,应该是国内最快的cdn了(:我瞎猜的:)还有,代码文件名里面的min都可以去掉,使用带有min的文件是最小化的样式,优点是加载速度较快,轻便.

下面说说我学到的一些东西.

<div class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">某管理系统</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li class="dropdown"><a href="#" >功能</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
</div>

效果是这样的

导航栏

让导航栏自动折叠

使用响应式布局令导航栏在设备宽度小于一定程度时自动折叠.

在navbar-header块里面添加一个class为collapsed的button,这个button默认隐藏在屏幕宽度不够的时候出现.

更多关于导航栏的详细内容戳官方文档component->navbar栏目.还是放一个传送门吧.

栅格系统

使用class="row"产生一排.

使用class="col-md-*"(*为1-12的数字)的div块,col-md-*只是其中一种样式,更多其他的样式看官方文档.

并且栅格系统使用响应式布局,可以在设备宽度不同的状态下呈现出不同的样式.

官方文档里面关于栅格系统的传送门.

更多网页元素

一些网页元素的都可以在bootstrap的官方文档里面找到详细的解释.

下面放两个传送门吧!

面板

令class="panel"可以在页面中产生一个面板,可以使用class属性进行更多样式设置.面板的官方文档传送门.

按钮组

令class="btn"可以在页面中产生一个按钮,令class="btn-group"可以在页面中产生一个按钮组, 按钮组里面放入type="button"class="btn"的按钮, 可以使用bootstrap做好的按钮组,让一系列按钮组成一个group,可以使用class属性进行更多样式设置.按钮的官方文档传送门.

样例代码

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

效果是这样的

按钮组效果

还有很多元素就不一一列举了.

我的作品

我把我在学习bootstrap过程中写的一些网页用git做了备份放到了github上.这里是地址

最主要的两个页面:

一个是教程里面老师教学演示时做的现代浏览器博物馆页面,我一行一行的把代码全部敲了一遍,这里是demo传送门.
第二个是慕课网教程的最后有一个变成挑战任务,认真的一步一步的完成了,这里是demo传送门.

这两个页面都是一些静态的基本布局,最多最多使用了一些bootstrap提供的js.

我的收获

敲了一天的html代码,算是一次不很不错的练习了.对html和css的知识有了更深入的认识.现在让我去写一个基本的网页框架是可以写的出来的了.

对盒子模型有了更深一步的了解,div元素的使用非常灵活.

我想,也许我可以开始动手制作自己的jekyll主题了呢~=o=~

Lyeec