bootsrap的两种使用方式:
1)、官网下载bootsrap压缩包:http://v3.bootcss.com/getting-started/,然后复制到项目中,引入bootsrap包的路径即可使用
2)、使用 BootCDN 提供的免费 CDN 加速服务(即不用下载bootsrap包,直接在页面导入以下CDN路径即可)
<script src="../js/jquery.js"></script>
(<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>)
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
(注:bootsrap中所有js插件都依赖于jQuery,因此jQuery要在boostrap之前引用)
BootStrap全局css样式
一、HTML5 文档类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
二、布局容器
.container 80%
.container-fluid 100%
<div class="container">
...
</div>
三、栅格系统 .col-md-*
1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
2.所有“列（column）必须放在 ” .row 内
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
3.列偏移 .col-md-offset-*
使用 .col-md-offset-* 类可以将列向右侧偏移
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">向右偏移4个单位</div>
</div>
四、排版
1.标题 <h1>...<h6>
2.副标题 <small>
<h1>标题<small>副标题</small></h1>
3.<mark>高亮显示</mark>
4.文本对齐类
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>
5.列表
1）无序列表 ul
<ul>
<li>...</li>
</ul>
2）有序列表 ol
<ol>
<li>...</li>
</ol>
3）无样式列表 list-unstyled
<ul class="list-unstyled">
<li>...</li>
</ul>
4）内联列表 class="list-inline" 所有元素放置于同一行
<ul class="list-inline">
<li>...</li>
</ul>
五、表格 .table
1.基本样式
<table class="table">
...
</table>
2.条纹状表格 class="table table-striped"
3.带边框的表格 class="table table-bordered"
4.鼠标悬停 class="table table-hover"
5.紧缩表格 class="table table-condensed"
6状态类 设置颜色
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
六、表单
1.所有设置了.form-control类的 <input> 默认宽度为100%
2.带标签的输入框 label 设置 .sr-only 类可以将标签隐藏
<form>
<div class="form-group">
<label>用户名</label>
<input type="email" class="form-control" id="username" placeholder="用户名">
</div>
</form>
3.内联表单 左对齐 排列一行
<form class="form-inline">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="" placeholder="Jane Doe">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
4.水平排列的表单 .form-horizontal 标签和输入框排列一行
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="" placeholder="Email">
</div>
</div>
</form>
5.表单控件
1）输入框 <input type="text" class="form-control" placeholder="Text input">
2）文本域 <textarea class="form-control" rows="3"></textarea>
3）多选和单选 class="checkbox" class="radio"
4）内联单选和多选框 class="checkbox-inline" class="radio-inline"
5）下拉列表 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
6）静态控件 将标签和纯文本放置于同一行 为 <p> 元素添加 .form-control-static 类即可
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
7）禁用状态 disabled
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
8）只读状态 readonly
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
9）小图标
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
10）输入框组 .input-group
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div>
</div>
七、按钮
1.元素
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
2.按钮样式
class="btn btn-default" primary success info warning danger link
3.块级元素按钮 .btn-block
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
4.按钮禁用状态
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
八、图片
1.响应式图片 图片水平居中 .center-block
2.图片形状
九、辅助类
1.关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
2.三角符号
<span class="caret"></span>
3.让内容块居中
<div class="center-block">...</div>
BootStrap组件
一、下拉菜单 .dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
二、按钮组
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
三、导航 .nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
四、导航条
http://v3.bootcss.com/components/
固定在顶部
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
反色的导航条 .navbar-inverse
路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
五、分页
1.基本样式
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2.翻页
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
六、标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
七、徽章（未读消息提示功能）<span class="badge">
<a href="#">Inbox <span class="badge">42</span></a>
八、巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
九、可关闭的警告框
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
十、媒体对象（评论）
<div class="media">
<div class="media-left media-middle">
<a href="#">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
十一、带标题的面版
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
网友评论