当前位置： 后端开发工具-什么是前端开发和后端开发
一、简介
好久没写博客了，不过最近也没闲着，接触了很多方面。 比如一些前端框架和组件，还有移动开发React-Native，还有一些.NET框架设计的新认识。 这些内容会在接下来的时间里一一分享给大家。 为什么我离开了这么久才重新写博客？ 因为这段时间虽然接触了那么多东西，也没有停下来学习，但是如果不写一篇博文总结一下后端开发工具，总觉得这些东西不是我的。 我的心总是感到空虚。 今天先介绍一个前端“风格”的框架——Bootstrap。
二、Bootstrap整体架构
为什么我在介绍中称Bootstrap为前端风格的框架？ 可能这个称呼不是很准确，但是我觉得这个称呼可以帮助一些初学者了解和了解什么是Bootstrap。 我总结一下，我不喜欢用一些高深的词来加深对某一知识的理解。 相反，我更喜欢用一些通俗易懂的词来描述知识点。 虽然这样的描述可能有点不准确，但是我觉得没什么大不了的，因为这样的描述确实可以让初学者更快的理解这些知识。 因为我在学习知识点的时候就有这样的困惑。 一些知识官方文档说是高大上，其实就是前面的一些东西，然后封装起来，开发起来更简单快捷。 所以这里我也分享一下Bootstrap框架。 而且内容组织也是为了让初学者更好的掌握。 因为我刚开始接触的时候也是初学者。 我认为这种组织可以更快更好地理解知识。
对于Bootstrap，首先要介绍的是它的整体架构——它是由什么构成的。 相信大家看了下图就能很快明白Bootstrap是由什么组成的。
从上图可以清楚的看出Bootstrap主要由以下几个部分组成：
Bootstrap 由以上几部分组成。 上面已经对各个组件做了简单的介绍后端开发工具，下面的内容无非就是通过一些例子对各个组件进行详细的介绍。
三、12格系统
Bootstrap 定义了一个 12 格系统以实现更好的布局。 每个前端框架都必须首先定义布局系统。 在 Bootstrap 中，页面布局是使用行和列创建的。 它的布局有几个原则：
在bootstrap的网格系统中，浏览器按照宽度分为4种。 取值有：自动（100%）、750px、970px、1170px。
对应的样式有特小（xs）、小（sm）、中屏（md）、大（lg）
它是通过媒体查询定义最小宽度来实现的。 所以，Bootstrap做出来的网页，相互兼容，但又不兼容！
在Bootstrap框架中，已经预先定义了屏幕尺寸的边界值，边界值是通过媒体查询来定义的。 它的定义如下：
/* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }
事实上，Win8 应用程序开发也使用媒体查询来实现响应式应用程序。 所以如果你以后听到responsive system，不要觉得它很深奥。 事实上，框架为我们定义了媒体查询。 如果超过了媒体查询中定义的最小宽度，则对应的是某种类型的屏幕。 缩小屏幕之间的元素大小以适合屏幕。 但是Bootstrap提出的理念是移动设备优先，所以Bootstrap设计的页面只能兼容大的，不能兼容小的。
4.基本布局组件
基本布局组件为Bootstrap框架中的一些基本布局标签定义了一些统一的样式。 比如Table、button、form等。我们来看一个Table的例子：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
head>
<body>
<h3>默认样式的Tableh3>
<table class="table">
<caption>表标题.caption>
<thead>
<tr>
<th>IDth>
<th>First Nameth>
<th>Last Nameth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Tommytd>
<td>Litd>
tr>
<tr>
<th scope="row">2th>
<td>Bobtd>
<td>santd>
tr>
<tr>
<th scope="row">3th>
<td>Samtd>
<td>wangtd>
tr>
tbody>
table>
<h3>带边框的表格h3>
<table class="table-bordered">
<caption>表标题.caption>
<thead>
<tr>
<th>IDth>
<th>First Nameth>
<th>Last Nameth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Tommytd>
<td>Litd>
tr>
<tr>
<th scope="row">2th>
<td>Bobtd>
<td>santd>
tr>
<tr>
<th scope="row">3th>
<td>Samtd>
<td>wangtd>
tr>
tbody>
table>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
body>
html>
具体运行效果：运行这里。
Button和form的示例代码这里就不贴了。 您可以通过以下链接查看运行效果和查看源码。 您也可以通过上次下载文件下载本专题的所有源码。
Button例子的运行效果：这里运行
窗体示例运行效果：这里运行
五、CSS组件
CSS组件类似于基本的布局组件，就是Bootstrap为一些标签定义了一些已有的样式，这些样式的效果非常漂亮，这样每个公司或者开发者都不需要另写样式，从而加快开发效率. 这是导航的示例。 说白了，这个东西你用多了就会熟悉了。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
head>
<body>
<h3>导航条h3>
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Homea>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)span>a>li>
<li><a href="#">Abouta>li>
ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Linka>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="#">Action 1a>li>
<li><a href="#">Action 2a>li>
<li><a href="#">Action 3a>li>
<li role="separator" class="divider">li>
<li><a href="#">Separated Actiona>li>
ul>
li>
ul>
div>
div>
nav>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
body>
html>
其运行效果：跑到这里
其他组件运行效果如下：
分页示例运行效果：这里运行
下拉菜单的效果：这里运行
面板运行效果：这里运行
六、JavaScript插件
默认情况下，所有的 JS 插件都可以通过设置特定的 HTML 代码和相应的属性来实现，而无需编写一行 JavaScript 代码。 它的实现本质是Bootstrap为这些属性实现了相应的JavaScript代码。
我们直接看一个模态窗口的例子：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Templatetitle>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
head>
<body>
<h3>模态窗口h3>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click me
button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">Modal titleh4>
div>
<div class="modal-body">
<p>Test body…p>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
<button type="button" class="btn btn-primary">Save changesbutton>
div>
div>
div>
div>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js">script>
body>
html>
它的运行效果：在这里运行。
看完前面的所有内容，是不是瞬间觉得Bootstrap其实只是一个样式框架。 我们可以用它来快速方便地构建网页。 另外，看完前面的内容，你就不会疑惑为什么官方的Bootstrap文档是这样的了：
Bootstrap官方文档的导航栏中的入口不就是我们上面介绍的主要组件吗。
七、总结
至此，本文所有内容的分享就结束了。 希望通过本文，初学者能够快速的了解和掌握Bootstrap。 另外，这篇文章相当于Bootstrap的精要。 更详细的内容可以参考Bootstrap中文官网。 但我认为没有必要。 有那种时间，还是直接练吧。 VS2013 web应用已经默认支持Bootstrap框架。 阅读前可以直接通过VS2013创建一个web应用，体验Bootstrap在Asp.net MVC下的应用。具体相关教程可参考：ASP.NET MVC使用Bootstrap系列
下一篇我会继续和大家分享前端MVVM框架——AngularJS。
本文所有源码下载：BootstrapSamples。
上一篇 
