初识bootstrap
加粗样式简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。
bootstrap 容器
- container-fluid 流体
- container 响应式
1170
970
750
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<title></title>
在使用之前先要引入js，css文件中的bootstrap所依赖的文件
这是一个理解bootstrap容器的实例
<!--一直都是100%-->
<div class="container-fluid">流体容器</div>
<br>
<br>
<div class="container">响应式容器</div>
效果图
bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行
<div class="container">
<h1>栅格系统</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-5</div>
</div>
<br>
<br>
<!-- 选型号 -->
<div class="row">
<div class="col-md-3">col-lg-3</div>
<div class="col-md-2">col-lg-2</div>
<div class="col-md-6">col-lg-6</div>
</div>
<div class="row">
<div class="col-sm-3">col-lg-3</div>
<div class="col-sm-1">col-lg-1</div>
<div class="col-sm-7">col-lg-7</div>
</div>
<div class="row">
<div class="col-sm-3">col-lg-3</div>
<div class="col-sm-1">col-lg-1</div>
<div class="col-sm-7">col-lg-7</div>
</div>
</div>
位偏移
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1"></div>
<div class="col-lg-5 col-md-5"></div>
</div>
<br>
<br>
<!-- 后面的偏移一份-->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 col-md-offset-1"></div>
</div>
</div>
bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
<div class="container">
<div class="row">
<h2>栅格系统</h2>
</div>
</div>
<div class="container">
<div class="row">
<input type="button" value="按钮" class="btn btn-primary">
<a href="#" class="btn btn-info">a标签按钮</a>
<a href="#" class="btn btn-warning">a标签按钮</a>
<a href="#" class="btn btn-link">a标签按钮</a>
<a href="#" class="btn btn-warning">a标签按钮</a>
<a href="#" class="btn btn-success">a标签按钮</a>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row">
<input type="button" value="按钮" class="btn btn-primary">
<a href="#" class="btn btn-info btn-lg">大</a>
<a href="#" class="btn btn-warning btn-md">中</a>
<a href="#" class="btn btn-warning btn-xs">小</a>
<a href="#" class="btn btn-warning">一般</a>
</div>
</div>
<div class="row">
<a href="#" class="btn btn-primary btn-group-justified">宽度是100%的按钮</a>
</div>
<div class="row">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮一</a>
<a href="#" class="btn btn-default">按钮二</a>
<a href="#" class="btn btn-default">按钮三</a>
</div>
</div>
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input href="#" class="btn btn-primary">按钮一</input>
</div>
<div class="btn-group">
<input href="#" class="btn btn-default">按钮二</input>
</div>
<div class="btn-group"><input href="#" class="btn btn-default">按钮三</input>
</div>
</div>
</div>
bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单
<div class="container">
<div class="row">
<h2>表单</h2>
</div>
</div>
<div class="container">
<div class="row">
<!-- 手机端 -->
<form class="form-group">
<label for="input01">用户名:</label>
<input type="text" class="form-control" id="input01"/>
<label>密码:</label>
<input type="password" class="form-control" />
</form>
<br>
<br>
<br>
<!-- pc端 -->
<form class="form-inline">
<label for="input01">用户名:</label>
<input type="text" class="form-control" id="input01"/>
<label>密码:</label>
<input type="password" class="form-control" />
</form>
<br>
<br>
<br>
<form class="form-horizontal">
<label for="input01" class="col-sm-1">用户名:</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="input01"/>
</div>
<label class="col-sm-1">密码:</label>
<div>
<input type="password" class="form-control" />
</div>
</form>
<br>
<br>
<form>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<input type="button" name="" class="btn btn-default" value="搜索" />
</span>
</div>
</form>
<form>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->
<button class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span></button>
</span>
</div>
</form>
</div>
</div>
bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
15、navbar-left 菜单靠左
16、navbar-right 菜单靠右
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- 定义logo和切换小图标 -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<!-- 定义菜单 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">解决方案</a></li>
</ul>
<!-- 定义菜单里面的表单 -->
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" name="" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
bootstrap 模态框
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
<div class="container">
<div class="row">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出大模态框</button>
<button class="btn btn-primary" id="btn01">js控制的弹框</button>
</div>
</div>
<div class="modal fade" id="modal01">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
提示弹框
</div>
<div class="modal-body">
<p>文字内容</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">确定</button>
<button class="btn btn-default" data-dismiss = "modal">取消</button>
</div>
</div>
</div>
</div>
<br>
<div class="modal fade" id="modal04">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
提示弹框
</div>
<div class="modal-body">
<p>js控制的弹框</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">确定</button>
<button class="btn btn-default" id="shutoff">取消</button>
</div>
</div>
</div>
</div>
bootstrap 模态框
1、dropdown-toggle
2、dropdown-menu
<div class="row">
<div class="dropdown">
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</div>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
</ul>
</div>
</div>
扫一扫
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
