怎么样使用bootstrap快速开发一个简单的前
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么样使用bootstrap快速开发一个简单的前相关的知识，希望对你有一定的参考价值。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 html、CSS、javascript 的。历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
最近空余时间比较多，今天先给大家介绍一个前端“样式”框架——Bootstrap。
一、Bootstrap 整体架构
为什么在引言我称为Bootstrap为一个前端样式框架呢？可能这样的称谓并不是很准确，但是我觉得这样的称呼可以让一些初学者可以更快明白和明白Bootstrap到底是一个什么东西。我总结东西不喜欢用一些高大上的词语来加深某个知识的理解，反而更喜欢用一些大家通俗易懂的词语来描述知识点。虽然这样的描述方式可能会有点不准确，但是我觉得则没什么大不了的，因为这样的描述确实可以让初学者更快理解这个知识。因为我在学习知识点的时候就有这样的困惑，有些知识官方文档都说的高大上，其实说白了也就是以前的一些东西，然后进行封装使得开发更加简单和快速罢了。所以这里我分享Bootstrap框架也是这样的。并且内容组织方面也是为了让初学者更好地掌握。因为我刚开始接触的时候也是一个初学者。我自认为这样的组织方式可以更快更好地理解知识。
对于Bootstrap，首先要介绍而是它的整体架构——它到底由什么组成的。相信大家看下面一张图就可以很快明白Bootstrap中具体由哪些东西组成的。
从上面的图，可以清楚看到，Bootstrap主要有下面几部分组成：
12栅格系统——就是将屏幕平分12份（列）。
使用行(row)来组织元素（每一行都包括12个列），然后将内容放在列内。
通过col-md-offset-*来控制列偏移。
基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。
Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件，就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外，还需要引用Jquery库的原因，两者是依赖关系。
CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。
JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。
响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。
Bootstrap就是由上面几部分组成的。上面已经都每个组成部分做了一个简单的介绍，接下来的内容无非是通过一些实例来对每个组成部分进行一个详细的介绍罢了。
二、12栅格系统
Bootstrap定义12栅格系统，就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面，就是利用行和列来创建页面布局的。其布局有几个原则：
行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中
每行都包含12列
将内容放置在每列中
在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应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦，其实就是框架为我们定义了媒体查询，如果超过了媒体查询中定义的最小宽度对应某个类型屏幕，通过这样的方式，就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的，所以Bootstrap设计出来的页面只能向大兼容，向小不兼容。
三、基础布局组件
基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!--因为这里没有使用到Bootstrap的JS插件，所以就没有引用Jquery组件-->
<!-- Bootstrap -->
<link rel="stylesheet" /bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h3>默认样式的Table</h3>
<table>
<caption>表标题.</caption>
<!-- 表头，组合为t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<h3>带边框的表格</h3>
<table>
<caption>表标题.</caption>
<!-- 表头，组合为t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<!-- 更多表格样式参考： /css/#tables-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script srwww.cdccgs.com?/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script srwww.cdccgs.com?/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
对于Button和表单的例子代码这里就不贴了，大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。
四、CSS组件
CSS组件和基础布局组件差不多，也就是Bootstrap为一些标签定义了一些已有的样式，这些样式运行的效果都非常美观，这样每个公司或开发人员都不需要再去写一篇样式，从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西，你用多了自然就熟了。 参考技术A 怎么样使用bootstrap快速开发一个简单的前什么？？？？前台？
Bootstrap 使用
一、简介
1. 什么是Bootstrap
-
是一个基于HTML、CSS、JavaScript的前端框架。让前端开发更简单快速
-
好处：
-
开发快速，代码优雅，美观大方
什么样的代码是优雅的：
-
完成需求
-
bug要少
-
格式化
-
逻辑简洁，清晰明了
-
代码注释
-
2. 响应式布局
-
响应式布局：同一套页面自动适应不同的终端设备，显示合适的样式。
-
Bootstrap是响应式布局最成功的实现
-
移动设备优先的前端框架
二、栅格系统
1. 什么是栅格系统
-
栅格系统：是一种页面布局方式。综合了table的简单和div+css的高效，形成的一种新布局方式。
2. 栅格系统的使用
2.1 容器
-
container：宽度是阶段性变化的固定值。如果占不满，两边有留白 -
container-fluid：宽度始终是100%
2.2 行
-
row：-
一个容器里可以有多行
-
一行里分为12份：一行里最多12个单元格
-
2.3 单元格
-
col-xx-n：单元格在xx设备类型里占n份-
n：单元格占几份
-
xx：设备类型：
lg, md, sm, xs
-
三、常用样式、组件、插件
1. 常用样式
-
内联列表：通常用于友情链接，横向排列的链接
-
表格：
-
普通表格：在table标签上加类名：table
-
条纹表格：在table标签上加类名：table-striped
-
带边框表格：在table标签上加类名：table-bordered
-
鼠标悬念变色：在table标签上加类名：table-hover
-
-
表单：
-
文本框
-
文本域
-
下拉框
-
单选和多选
-
-
按钮
2. 常用组件
-
字体图标：在任何标签上增加类名，类名是图标的名称
-
导航条：
-
反色导航条：给最外层的nav标签设置类名：
navbar navbar-inverse -
导航条里表单靠右：给form标签设置类：
navbar-form navbar-right
-
-
分页
-
标记当前页：在页码的li标签上增加类名：
active -
禁用按钮：在按钮的li标签上增加类名：
disabled
-
-
进度条
3. 常用插件
-
模态框
-
窗口的内容分为三部分：
-
modal-header：头部
-
modal-body：内部
-
modal-fotter：底部
-
-
-
轮播图Carousel
-
Indicators：指示灯，图片上显示的小点。通常有几张图片，就显示几个小点
-
Wrapper for Slides：要切换的图片。
-
每个
div class="item"是一张图片的显示，-
把图片路径写到内部的img标签上
-
添加文字描述
-
-
-
Controls：控制按钮
-
上一张和下一张
-
-
内容总结
-
理解响应式布局：
-
同一套页面自动适应不同的终端设备，显示合适的样式。
-
bootstrap的响应式布局，靠栅格系统实现的
-
-
栅格系统：布局，用法类似于表格，本质是div+css
-
容器：
-
container：宽度是阶段性变化的固定值，两边有留白
-
container-fluid：宽度始终是100%
-
-
行：一个容器里可以有多行
-
row：一行里最多有12个单元格
-
如果不够12个，空着
-
如果超过12个，换行显示
-
-
-
单元格：一行里可以有最多12个单元格
-
col-xx-n：单元格在xx设备类型里要占n份
-
xx：设备类型：
lg, md, sm, xs -
n：单元格占几份
-
-
-
-
常用样式
-
内联列表
-
表格
-
表单
-
按钮
-
-
常用组件
-
字体图标
-
导航条
-
分页条
-
-
常用插件
-
模态框
-
轮播图
-
-
以上是关于怎么样使用bootstrap快速开发一个简单的前的主要内容，如果未能解决你的问题，请参考以下文章
7 个 Bootstrap 在线编辑器用于快速开发响应式网站