这里写自定义目录标题
Bootstrap的安装引入
Bootstrap的安装
通过链接:https://www.bootcss.com/进行下载安装。
Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
可根据需求自行选择。
文件结构
预编译的 Bootstrap
当下载 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:
Bootstrap 源代码
如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
Bootstrap的引用
将所下载的文件中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、必须先引入bootstrap的支持 ,包括js、css、font文件。
2、引入的文件必须先有jQuery的核心文件,再引入bootstrap的js文件,再引入自己的文件。
3、css文件必须先引入bootstrap的css文件再引入自己的文件
4、font文件无需在页面上引入,但是需要在项目的目录中存在
Bootstrap的使用
Bootstrap 网格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 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">列1</div>
<div class="col-lg-6">列2</div>
</div>
<div class="row">
<div class="col-lg-4">列1</div>
<div class="col-lg-4">列2</div>
<div class="col-lg-4">列3</div>
</div>
<div class="row">
<div class="col-lg-2">列1</div>
<div class="col-lg-2">列2</div>
<div class="col-lg-2">列3</div>
<div class="col-lg-2">列4</div>
<div class="col-lg-2">列5</div>
<div class="col-lg-2">列6</div>
</div>
</div>
</body>
运行效果:
1.行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
2.使用行来创建列的水平组。
3.内容应该放置在列内,且唯有列可以是行的直接子元素。
4.预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
offset偏移效果
<div class="row">
<div class="col-lg-4 col-md-offset-1">列1</div>
<div class="col-lg-4">列2</div>
</div>
运行效果:
Bootstrap 表单
垂直或基本表单
1.向父 元素添加 role=“form”。
2.把标签和控件放在一个带有 class .form-group 的
3.向所有的文本元素 、 和 添加 class .form-control。
代码:
<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-inline。
<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-horizontal。
2.把标签和控件放在一个带有 class .form-group 的
3.向标签添加 class .control-label。
结合网格效果:
运行效果:
Bootstrap 导航栏
1.向nav标签添加 class .navbar、.navbar-default。(向上面的元素添加 role=“navigation”,有助于增加可访问性。)
<nav class="nav navbar-default" role="navigation" >
2.向 div元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。
<div class="navbar-header">
<a href="#" class="navbar-brand">笔记本电脑</a>
</div>
3.为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-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>
运行效果:
Bootstrap 分页组件
默认分页
<div class="container">
<ul class="pagination">
<li class="disabled"><a href="">上一页</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">下一页</a></li>
</ul><br />
</div>
运行效果:
通过disabled与active,当位于第一页的时候上一页无法点击。
不同分页之间的大小
<ul class="pagination">//默认大小
<ul class="pagination pagination-sm">//小
<ul class="pagination pagination-lg">//大
运行效果:
翻页
如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。
<ul class="pager">
<li class="previous"><a href="">Previous</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="next"><a href="">next</a></li>
</ul>
运行效果
Bootstrap 字体图标
<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> plus
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
</div>
运行效果: