移动端框架 - Bootstrap

Bootstrap

Bootstrap简介

Bootstrap来自 Twitter，感觉更多的是在移动端使用。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• 工作原理
  
• 参数
  
  在超小屏幕下分两行显示，桌面显示器则并行显示

	<div class="row">     
		<div class="col-xs-12 col-md-6"></div>     
		<div class="col-xs-12 col-md-6"></div> 
	</div>

字体图标

一些好看的字体图标，其实就是这么来的

• 使用方法
  空白的span标签上，添加class类名，字体图标下面的英文
  

 <span class = "glyphicon glyphicon-queen"></span>

组件 - 按钮样式

	<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>

优势

提高开发效率
规范名称定义，便于维护
css代码更清晰、简单。html代码更合理
大规模项目中可以减少用户下载

劣势

学习成本提高。你需要了解整个框架，需要阅读框架的文档
可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug
选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿

---

具体如何应用查看Bootstrap API官网