Bootstrap 网格系统
这里写自定义目录标题 的引用 的使用 表单 导航栏 分页组件 字体图标
的安装引入 的安装
通过链接：进行下载安装。
：下载 。点击该按钮，您可以下载 CSS、 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 LESS 和 源代码。
可根据需求自行选择。
文件结构 预编译的
当下载 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
源代码
如果您下载了 源代码，那么文件结构将如下所示：
less/、js/ 和 fonts/ 下的文件分别是 CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-/、/ 和所有的 *.html 文件是 文档。
的引用
将所下载的文件中css、js、fonts文件复制到自己的项目里。在对其引用
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><!--导入自己的js文件--><link rel="stylesheet" href="css/bootstrap.css" /><link rel="stylesheet" href="css/bootstrap-theme.css" /><!--导入自己的css文件-->
1、必须先引入的支持 ，包括js、css、font文件。
2、引入的文件必须先有的核心文件，再引入的js文件，再引入自己的文件。
3、css文件必须先引入的css文件再引入自己的文件
4、font文件无需在页面上引入，但是需要在项目的目录中存在
的使用 网格系统
包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
当一行中列没有占满，多余的位置会空下来。
<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.1.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><link rel="stylesheet" href="css/bootstrap.css" /><link rel="stylesheet" href="css/bootstrap-theme.css" /><style>div{background-color:greenyellow;border: solid royalblue 1px;}</style></head>
<body><div class="container"><div class="row"><div class="col-lg-6">列1div><div class="col-lg-6">列2div>div><div class="row"><div class="col-lg-4">列1div><div class="col-lg-4">列2div><div class="col-lg-4">列3div>div><div class="row"><div class="col-lg-2">列1div><div class="col-lg-2">列2div><div class="col-lg-2">列3div><div class="col-lg-2">列4div><div class="col-lg-2">列5div><div class="col-lg-2">列6div>div>div>body>
运行效果：
1.行必须放置在 . class 内，以便获得适当的对齐（）和内边距（）。
2.使用行来创建列的水平组。
3.内容应该放置在列内，且唯有列可以是行的直接子元素。
4.预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
偏移效果
<div class="row"><div class="col-lg-4 col-md-offset-1">列1div><div class="col-lg-4">列2div>div>
运行效果：
表单 垂直或基本表单
1.向父 元素添加 role=“form”。
2.把标签和控件放在一个带有 class .form-group 的
中。
3.向所有的文本元素 、 和 添加 class .form-。
代码：
<form role="form" ><div class="form-group"><label for="name">用户名label><input class="form-control" name="name" />div><div class="form-group"><label for="name">密码label><input class="form-control" type="password" name="name" />div>form>
默认为垂直效果：
内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-。
<form role="form" class="form-inline"><div class="form-group"><label for="name">用户名label><input class="form-control" name="name" />div><div class="form-group"><label for="name">密码label><input class="form-control" type="password" name="name" />div>form>
水平表单
1.向父 元素添加 class .form-。
2.把标签和控件放在一个带有 class .form-group 的
中。
3.向标签添加 class .-label。
结合网格效果：
运行效果：
导航栏
1.向nav标签添加 class .、.-。（向上面的元素添加 role=“”，有助于增加可访问性。）
<nav class="nav navbar-default" role="navigation" >
2.向 div元素添加一个标题 class .-，内部包含了带有 class -brand 的 a 元素。这会让文本看起来更大一号。
<div class="navbar-header"><a href="#" class="navbar-brand">笔记本电脑a>div>
3.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.-nav 的无序列表即可。
<ul class="nav navbar-nav">
完整代码：
<div class="container"><nav class="nav navbar-default" role="navigation"><div class="navbar-header"><a href="#" class="navbar-brand">笔记本电脑a>div><div><ul class="nav navbar-nav"><li class="active"><a href="#">神舟a>li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" >联想<b class="caret">b>a><ul class="dropdown-menu"><li><a href="#">小新a>li><li><a href="#">拯救者a>li>ul>li><li><a href="#">惠普a>li>ul>div>nav> div>
运行效果：
分页组件 默认分页
<div class="container"><ul class="pagination"><li class="disabled"><a href="">上一页a>li><li class="active"><a href="">1a>li><li><a href="">2a>li><li><a href="">3a>li><li><a href="">4a>li><li><a href="">下一页a>li>ul><br />div>
运行效果：
通过与，当位于第一页的时候上一页无法点击。
不同分页之间的大小
<ul class="pagination">//默认大小<ul class="pagination pagination-sm">//小<ul class="pagination pagination-lg">//大
运行效果：
翻页
如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。
<ul class="pager"><li class="previous"><a href="">Previousa>li><li class="active"><a href="">1a>li><li><a href="">2a>li><li><a href="">3a>li><li><a href="">4a>li><li class="next"><a href="">nexta>li>ul>
运行效果
字体图标
<div class="container"><span class="glyphicon glyphicon-search">span> search<span class="glyphicon glyphicon-home">span> home<span class="glyphicon glyphicon-file">span> file<span class="glyphicon glyphicon-film">span> film<span class="glyphicon glyphicon-trash">span> trash<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-plus">span> plusbutton><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-user">span> 用户button>div>
运行效果：
