bootstrap?的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。
bootstrap中文网：http://v3.bootcss.com/??
bootstrap提供了三种类型的下载：
-------------------------------------------------------------
用于生产环境的?Bootstrap
编译并压缩后的?CSS、JavaScript?和字体文件。不包含文档和源码文件。
Bootstrap?源码
Less、JavaScript?和?字体文件的源码，并且带有文档。需要?Less?编译器和一些设置工作。
Sass
这是?Bootstrap?从?Less?到?Sass?的源码移植项目，用于快速地在?Rails、Compass?或?只针对?Sass?的项目中引入。
------------------------------------------------------------
其实我们不用下载bootstrap也可以使用它：
Bootstrap?中文网?为?Bootstrap?专门构建了自己的免费?CDN?加速服务。基于国内云厂商的?CDN?服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
base.html
<!DOCTYPE html>
<html lang="zh-CN">
head>
meta charset="utf-8"http-equiv="X-UA-Compatible" content="IE=edge"name="viewport"="width=device-width,initial-scale=1"<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
title>Bootstrap 101 Template</>
Bootstrap link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
bodyh1>你好，bootstrap！ jQuery (necessary for Bootstrap's JavaScript plugins) script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script Include all compiled plugins (below),or include individual files as needed ="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"html>
?base.html中已经引入了bootstrap，将其保存，我们就可以使用bootstrap提供的样式了。
?
字体图标
bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：
h3>图标>
span class="glyphicon glyphicon-home"span="glyphicon glyphicon-signal"="glyphicon glyphicon-cog"="glyphicon glyphicon-apple"="glyphicon glyphicon-trash"="glyphicon glyphicon-play-circle"="glyphicon glyphicon-headphones" 
按钮
<button></button>标签用于创建按钮，bootstrap提供了丰富的按钮样式。
<
>按钮
button type="button" class="btn btn-default"button="btn btn-primary">primary
="btn btn-success">success
="btn btn-info">info
="btn btn-warning">warning
="btn btn-danger">danger
>
>按钮尺寸
="btn btn-primary btn-lg"="btn btn-success btn-sm"="btn btn-info btn-xs">把图标显示在按钮里
><> 按钮
? 按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。
下拉菜单
下拉菜单是最常见的交互之一，bootstrap提供了漂亮的样式。
<
>下拉菜单
div ="dropdown">
="btn btn-primary dropdown-toggle" type id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
="caret"ul ="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
li role="presentation"a ="menuitem" tabindex="-1"="#">Action
ali>Another action
>Something else here
>Separated link
uldiv ?
输入框
通过<input></input>标签去创建输入框。
>输入框
="input-group"="glyphicon glyphicon-user"input ="text" placeholder="username"="glyphicon glyphicon-lock"="password"="password" ?
导航栏
导航栏作为整个网站的指引必不可少。
>导航栏
nav ="navbar navbar-inverse navbar-fixed-top"id="navbar"="navbar-collapse collapse">
="nav navbar-nav">
="active"href>Home
="#about">About
="#contact">Contact
>
="#"="dropdown-toggle"="false">Dropdown
="menu">
="divider"="dropdown-header">Nav header
>/.nav-collapse -->
nav ?
??
表单
人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用<form></form>标签来创建表单。
<
>表单
form="form-group"="email"="exampleInputEmail1"="Enter email"="exampleInputPassword1"="Password"label for="exampleInputFile">File input
label="file"p ="help-block">Example block-level help text here.
p="checkbox"> Check me out
="submit">Submit
?
警告框
警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。
>警告框
="alert alert-warning alert-dismissible"="alert">
="close" data-dismiss="alert" aria-label="Close"aria-hidden×strong>Warning!
> Better check yourself,you're not looking too good.
="alert alert-success"="alert-link">success!
="alert alert-info">info!
="alert alert-warning">warning!
="alert alert-danger">danger!
??
进度条
系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。
>进度条
="progress"="progress-bar"="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
?
?
===========结束===========
1、我觉得前段更像是艺术，人们对美好的东西从来不会产生分歧。前段更像是通过技术展示美好。
2、前段技术的学习是所见即所得，你可以任意的修改标签及其属性，并且立马看到修改后的效果。
3、对于bootstrap来说，标签最重要的属性就是class，因为使用的不同的class属性值，可以使你的标签样式颜色发生变化。
4、这篇文章很简单，只是罗列一些最基本的页面元素组成。bootstrap更多的学习：http://v3.bootcss.com/
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
