bootstrap 笔记
1.css样式
1)栅格系统
2)排版
3)代码
4)表格
5)表单
6)按钮
7)图片
8)辅助类
9)响应式工具
2.css组件
1)glyphicons图标
2)下拉菜单
3)按钮组
4)输入框组
5)导航
6)导航条
7)路径导航
8)分页
9)标签
10)徽章
11)巨幕
12)页头
13)缩略图
14)警告框
15)进度条
16)媒体对象
17)列表组
18)面板
19)响应式嵌入内容
20)well
3.js插件
1)模态框
2)下拉菜单
3)滚动监听
4)标签页
5)工具提示
6)弹出框
7)警告框
8)按钮
9)折叠效果
10)幻灯片效果
11)固定侧面栏
------------------------------------------------
1.bootstrap安装
2.bootstrap全局CSS样式
3.bootstrap CSS组件
4.bootstrap javascript插件
bootstrap安装:
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
html5文档类型:
<!doctype html>
移动端设备的真实宽度:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器:
.container
栅格系统:
.row 一行12列
.col-md-4 占3列的宽
排版:
1.标题(.page-header)//标题样式
2.段落(.lead)//加粗
3.mark标记
<mark></mark>
4.del删除线
<del></del>
5.small小号字体
<small></small>
6.文本对齐
.text-right
.text-left
.text-center
7.文本大小写
.text-lowercase :小写
.text-uppercase :大写
.text-capitalize:首字母大写
8.无样式列表
.list-unstyled(去除列表前面的序号和点点)
9.内联列表
10.自定义列表
<dl>
<dt>选择题:</dt>
<dd>A: linux</dd>
<dd>A: linux</dd>
<dd>A: linux</dd>
<dd>A: linux</dd>
</dl
11.水平排列列表
.dl-horizontal
代码:
1.code
2.pre
3.kbd
表格:
table
table-striped
table-bordered
table-hover
表格颜色:
.info
.success
.active
.warning
.danger
响应式表格:
<div class="table-responsive">
<table class="table">
</table>
</div>
按钮:
.btn //灰色按钮
.btn-default //灰色响应按钮
.btn-primary //深蓝色
.btn-success// 绿色
.btn-info //淡蓝色
.btn-warning//橙色
.btn-danger//红色
.btn-link // 超链接
按钮大小:
.btn-lg
.btn-default
.btn-sm
.btn-xs
块按钮:
.btn-block
属性:
disabled=“disabled”使得它没法点的动(禁用按钮)
a链接
<input type="submit"/>,
<input type="reset"/>
<input type="button"/>
也可以添加这些属性来使得它变成按钮。
图片样式:
.img-rounded :圆角
.img-circle :圆
.img-thumbnail :边角白色(图片背景不为白的时候使用)
<img src="" class="">
辅助类:
文本颜色:
.text-muted 灰色
.text-primary 蓝色
.text-success 绿色
.text-info 淡蓝色
.text-warning 橙黄色
.text-danger 红色
文本背景颜色:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg=danger
关闭按钮:
.close
更多下三角:
.caret(用在按钮上)
浮动:
.pull-right/ .pull-left
清除浮动:.clearfix
让内容居中:
.center-block(让块标签居中)
显示和隐藏:
.show
.hide
---------------------
css组件:
字体图标:
Glyphicons
.glyphicons .glyphicon-xxx
.glyphicons .glyphicon-triangle-right
下拉菜单:
.dropdown
.dropup
.drop-menu
date-toggle='dropdown'
<div class="dropdown">
<button class="btn btn-primary" date-toggle='dropdown'>
更多信息<span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li class=‘dropdown-header’><a href="xxx"></a></li>
<li class='divider'></li>
<li><a href="xxx"></a</li>
<li><a href="xxx"></a</li>
<li class="disabled"><a>xxx</a></li>
</ul>
</div>
.dropdown-header标题
.divider 分割线
.disabled 禁用
按钮组:
.btn-group
.btn-toolbar:更大的按钮排
尺寸:
.btn-group-lg
.btn-group-sm
.btn-group-xs
<div class="btn-group">
<button class="btn btn-default"></button
<button class="btn btn-default"></button
</div>
嵌套
.dropdown-toggle
按钮组垂直排列:
.btn-group-vertical
两端对齐的按钮组:
.btn-group-justified
放在外层的div中,然后里面的每个按钮组只有一个按钮
按钮组+下拉菜单:
<div class="btn btn-group">
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary dropdown-toggle" date-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
表单:
.form-group +has-success/has-error/has-info(表单框的颜色)
.from-control
.checkbox/.checkbox-inline(这个放在label里,label内放入input和选项)
.radio
.from-inline
.input-group
.input-group-addon
.from-horizontal
.control-label
.form-control-static 静态的值,这个放在p标签内
[disabled]:禁用
[readonly]:只读
filedset标签,在里面添加以上两个属性,禁用全局。
.input-lg(表单框的尺寸)
.input-sm
.help-block 表单下的提示
<from action="">
<div class="from-group">
<lable for="">用户名:</lable>
<input type="text" class="form-control" placeholder="username"/>
</div>
<div class="from-group">
<lable for="">密码:</lable>
<input type="text" class="form-control" placeholder="password"/>
</div>
<div class="from-group">
<lable for="">留言:</lable>
<textarea name="" id="" cols="" rows="" class="from-control">
</textarea>
</div>
<div class="from-group">
<select name="" id="" class="from-control">
<option value="">xxx</value>
<option value="">xxx</value>
<option value="">xxx</value>
</select>
</div>
<div class="from-grop"><
<input type="submit" value="提交" class="btn btn-primary"/>
<input type="reset" value="重置" class="btn btnprimary"/>
/div>
</from>
多选框:
<div class="from-group">
<label for="">爱好</lable>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="">篮球
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="">篮球
</label>
</div>
文件上传框://不建议使用
<div class="form-group">
<label for="">文件上传:</label>
<input type="file" name="" id="" class="from-control"/>
</div>
内联表单:使得表单成为一排
<from action="" class="from-inline">
输入框组:
<div from-group>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"/>
<div class="input-group-addon">$</div>
</div>
</div>
水平排列的表单:(使得用户名,密码和输入框在同一水平上)
<from class="from-horizontal">
<div class="from-group">
<label for="" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="from control" placeholder="username"/>
</div>
</div>
<div class="from-group">
<label for="" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="from control" placeholder="password"/>
</div>
</div>
</from>
输入框组:
.input-group
.input-group-btn
<from action="" class="from-horizontal">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="from-control">
</div>
</from>
输入框嵌入按钮:
<from action="">
<div class="input-group">
<input type="text" class="from-control">
<div class="input-group-btn">
<button class="btn btn-primary">GO</button>
</div>
</div>
</form>
导航:
.nav
.nav-tabs
.nav-pils
.nav-stacked 导航堆叠
导航条:
.navbar
.navbar-default
.navbar-inverse
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-header
.navbar-brand
.navbar-nav
.navbar-form
.navbar-btn
.navbar-text
.navbar-link
.navbar-left
.navbar-right
路径导航:
.breadcrumb
分页效果:
.pagination
上下页:
.pager
标签:
.label
.label-primary
.label-success
.label-info
.label-warning
.label-danger
徽章:
.badge
巨幕:
.jumbotron
缩略图:
.thumbnail
警告框:
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger
进度条:
.progress
.progress-bar
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active 使得条纹动
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:90%'>
90%
</div>
</div>
媒体对象:
.media
.media-left
.media-object
.media-body
.media-heading
.media-right
.media-top|middle|bottom
列表组:
.list-group
.list-group-item
面板:
.panel
.panel-primary
.panel-heading
.panel-title
.panel-body
.panel-footer
内嵌框架:
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-item
well:
.well
.well-lg
.well-sm
bs jquery插件:
-----------------------------------------------------------
弹框:
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer
滚动监听:
data-spy='scroll'
data-target='#mynav'
data-offset='150'
[自定义滚动监听实例]
标签页:
[data-toggle='tab']
.tab-content
.tab-pane
.active
.fade
.in
折叠效果:
[data-toggle="collapse"]
[data-parent='#accordion']
.panel-collapse
.collapse
.panel-group
幻灯片:
.carousel
.slide
[data-ride='carousel']
.carousel-inner
.item
.active
.carousel-indicators
[data-slide-to='0']
.left
.carousel-control
[data-slide='prev']
[data-slide='next']
affix固定:
[data-spy="affix"]
Bootstrap学习手册
最新推荐文章于 2020-07-12 11:21:28 发布