首发于前端杂记
更容易入门的bootstrap教程

更容易入门的bootstrap教程

前言:

转载请注明作者和出处

对手机用户并不友好。

第一次写知乎文章,挑一个自认为简单的写一下试试知乎的水。写的不好欢迎指正,懂得人都会觉得水,毕竟这是一个拿起就用的东西。最近在校师弟师妹问了我这框架怎么用,想了一下,根据人才金字塔的原理或许还有更多的人想要知道就写了。我希望我写的技术帖是这样的:我不是为了告诉读者我懂了,而是读者看完后说,他懂了。

大体上我会讲一开始怎么开始使用bootstrap和怎么看文档,假如你看不懂是为什么需要先去学什么,再就是粗略讲一下bootstrap从入门到精通,额,不对,是入门到放弃需要大概经历什么,已经懂了的人就不要浪费时间看了。


什么是bootstrap

估计能点进来的都知道,循例讲一下,bootstrap是一个响应式CSS框架,扁平化UI风格,很适合没有UI设计师的web项目,但不支持IE8及以下浏览器。(概念讲完,若不懂,请用步步高点火机,那里不会点哪里。)

更容易理解的hello world

起步页是了解一个框架的入口,bootstrap的起步页面让这个简易的框架对看起来并不简易,对新手也不友好。或许下面这个对你会有点帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cdn.bootcss.com/bootstr">
<title>bootstrap起步</title>
</head>
<body>
<button type="button" class="btn btn-success">hello world</button>
</body>
</html>


注:直接复制黏贴进一个html文件保存打开可以直接看到效果。用了CDN链接引用的是网上的bootstrap文件,无需下载。当然你也可以使用自己下载的bootstrap文件。


你会看到左上角有一个hello world 绿色按钮,说明你已经成功调用bootstrap。你并不需要写style样式只需要在html标签写一些class,因为一切样式都写在bootstrap(.min).css文件里面等着你去调用。这是bootstrap最大的特点。可能新手会习惯于先写HTML,再根据html结构写style,不习惯先考虑封装好的CSS,根据CSS结构结合HTML来写代码。但我相信这个应该不难。

有基础还可以的人基本就可以看着文档自己开工了。多数你还不能区分下面几条样式的区别。

选择器之间有个空格

.btn .btn-success{....} 

选择器之间有逗号

.btn,.btn-success{....} 

选择器挨在一起

.btn.btn-success{....} 

建议你去读一下网易NEC规范的CSS规范篇,花一天时间全部读完,回过头基本就能使用bootstrap。当然里面有些东西不一定适用(甚至有些是我讨厌的。)但在新手可以完全照做,没毛病。或许有一天你也能根据自己情况跟别人吐槽一下这个规范。

bootstrap响应式栅栏

响应式是bootstrap的最大卖点,能自适应各种屏幕大小不一设备。

先说一下响应式的原理,主要使用了CSS3的@media查询,下面这段代码并没有使用bootstrap,调整浏览器宽度大小,他会在不同窗口宽度下展现出不同效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式原理</title>
	<style>
		/*div的公用样式*/
		div{
			height: 50px;
		}
		/*当屏幕宽度最大值不能超过400px*/
		@media all and (max-width: 400px) {
			div {
				width: 100%;
				background-color:red;
			}
		}
		/*当屏幕宽度在400px~700px之间*/
		@media all and (min-width: 400px) and (max-width: 700px) {
			div {
				width: 50%;
				background-color:yellow;
			}
		}
		/*当屏幕宽度不小于700px*/
		@media all and (min-width: 700px)  {
			div {
				width: 20%;
				background-color:blue;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>



@media查询设备的一个固定用法,后面一般接all(所有设备)或者screen(电脑屏幕,平板电脑,智能手机等),后面的and可以增加一下判断的条件。看注释就能基本明白响应式原理,其实并不难,响应式并不是什么特别高大上的东西。下面开始入正题讲一下bootstrap版本的响应式栅栏系统


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>bootstrap起步</title>
</head>
<body>
	<div class="container-fluid">
		<div class="row" style="background: #DDD;padding: 20px 0;">
			<div class="col-xs-3 col-sm-5 col-md-6" style="background: #EEE">模块1</div>
  			<div class="col-xs-3 col-sm-5 col-md-6" style="background: #CCC">模块2</div>
		</div>
	</div>
</body>
</html>



  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

我从官网摘抄了一段,我认为这些是最重要的。我把新手可能看不懂的用我自己的话复述一次。bootstrap把一行(row)的宽度平均分成了12分,假如你想让你的div的宽占四分之一的大小,那么其实就是十二分之三大小,用<div class="col-xx-4">这是列(column)</div>表示,里面的xx可以填xs,sm,md,lg。分别对应上图表4中屏幕尺寸。

看回来我给出来的代码,其实在bootstrap里面,你把各种屏幕尺寸需要的布局效果,填在一个同一个标签的同一个class并不会有任何冲突,它会屏幕尺寸自动执行相应代码。你可以改变一下class里面数字并调整浏览器大小看看效果。

阅读bootstrap文档

任何一种框架,最了解它的永远是制造它的人,而其思想和最正确的用法基本 都能在官方文档找到,尤其是开源项目。bootstrap的文档因为有中文版还是比较清晰容易看的(除了起步页,对新手实在不友好)。在这里我会同时提及一下bootstrap官方的插件,但我不打算细讲,毕竟会jq应该都能看懂,不会jq的我又不可能在这里教你jq。

这里我用按钮组为例,毕竟上面用了一个按钮例子。大类的导航在页面最上端,右边是更细的分类。通过这里可以更快的搜索到自己想要找的东西。


首先就是一个名字大标题;然后就是它的作用(有依赖JS会以链接挂在那里),你可以看这里它判断功能是否是你需要的并选择是否使用;再然后就是注意事项,告诉你使用应该注意的规则避免出错。


往下就是基本实例,有运行效果效果以及对应的代码。观察代码规律还是比较容易找到使用方法的。再往下就是一些拓展应用,不一一贴出来说了。当然有一些会依赖js插件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>bootstrap起步</title>
</head>
<body>
	<div class="btn-group" role="group" aria-label="...">
	  <button type="button" class="btn btn-default">1</button>
	  <button type="button" class="btn btn-default">2</button>
	  <div class="btn-group" role="group">
	    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	      Dropdown
	      <span class="caret"></span>
	    </button>
	    <ul class="dropdown-menu">
	      <li><a href="#">Dropdown link</a></li>
	      <li><a href="#">Dropdown link</a></li>
	    </ul>
	  </div>
	</div>
<!-- 	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"</script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</body>
</html>

上面这段例子你会发现下拉按钮无法使用,那是因为它们依赖于js插件,插件被我注释掉了,删掉那个注释符号就可以正常使用。特别提醒一下,组件的依赖关系一般在开头就有介绍并带有链接,但点击过去后显示的js并没有提供下载地址,其实所有bootstrap的js都已经在bootstrap.js里面,可以不管(这里有一些模块化知识,超纲我就不讲了)。同时bootstrap依赖于jquery,使用的时候必须像上一段代码那样jquery.js的位置先于bootstrap.js。

很多时候我们使用了插件但我们并不需要去写js,当然它也提供一些js方法(科普一下,专业术语是接口,API等),让我们通过写js去控制它们,详细方法各有不同,不一一细说,学习一下看文档吧。

从入门到放弃

精通bootstrap的人已经放弃bootstrap。这句话听起来挺诡异的,但确实是这样。敢说精通bootstrap的人对其源码有一定研究,一般这种大牛的公司不配一个UI设计师?在有设计师的情况下基本不会使用bootstrap。就算这种大牛还在用bootstrap,那他也肯定根据自己需要改造过很多内容,已经不能说是bootstrap,或者这说这是专属版bootstrap。

入门

能够使用<button type="button" class="btn btn-success">按钮</button>

了解

能够在需要的时候正确使用<button type="button" class="btn btn-success">按钮</button>

熟悉

看过一定源码并理解<button type="button" class="btn btn-success">按钮</button>的实现

放弃

能结合自己情况,汲取bootstrap优的一面,改掉劣的一面,摒弃不需要的一面。

最后

希望对大家有点帮助,到最后真的跟着运行了代码但还是没头绪的,建议去看一下网易NEC。假如有用,请给点个赞,或者有建议也可以评论说。将来我可能会陆续写一下自己进阶路上遇到拦路虎,我会告诉大家如何初步解决,如何简单的说下进阶路线。主要还是偏向初级方向,因为处于初级阶段的人更多,而且我能讲的稍微好一点估计也只有初级的,毕竟不求予人桃李,但起码不能误人子弟。中高级的知识我理解还不够深。






特别讨厌那些不把老子当煞笔的技术文档,还是word文档,还是各种截图用ctrl+f搜不到复制黏贴的文档。希望自己的帖子没有那么烂。

编辑于 2017-12-01

文章被以下专栏收录