学习文件链接:
链接: https://pan.baidu.com/s/1i5VQaqx 密码: ydt2
可以根据标题搜索上面文件链接的html
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.插件
1)模态框
2)下拉菜单
3)滚动监听
4)标签页
5)工具提示
6)弹出框
7)警告框
8)按钮
9)折叠效果
10)幻灯片效果
11)固定侧边栏
下面的每个标题对应每个html文件名
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/holder.min.js"></script>
<script src="js/docs.min.js"></script>
html5文档类型
<!doctype html>
移动端设备的真实宽度:
<meta name='viewport' content='width=device-width',init-maximun-scale=1,user-scalable=no'>
布局容器:
.container
栅格系统:
.row 一行12列
.col-md-4 占3列的宽
排版
1.标题(.page-header)
2.段落(.lead)
3.mark标记
4.del删除线
5.sall小号字体
6.文本对齐
7.文本大小写
8.无样式列表
9.内联列表
10.自定义列表
代码:
1.code 红背景标记
2.pre 按原格式输出
3.kbd 黑色背景颜色
4.i 斜体
表格:
table 表格
table-striped 隔行背景
table-bordered 表格形成格子
table-hover 鼠标移上去动态
表格颜色:
active 灰色
success 绿色
info 青色
warning 黄色
danger 红色
响应式表格:
当<th></th>表头里面的内容很多的时候,可以用响应式表格
再table表格外面加上<div class='table-responsive'>
<div class='table-responsive'>
<table class='table'>
</table>
</div>
按钮颜色
.btn
.btn-deault (默认颜色) 白色
.btn-primary (首选项) 蓝色
.btn-success (成功) 绿色
.btn-info (一般信息) 青色
.btn-warning (警告) 黄色
.btn-danger (危险) 红色
.btn-link 链接
按钮大小
.btn
.btn-lg 大按钮
.btn-sm 默认大小按钮
.btn-xs 小按钮
按钮块级
.btn
.btn-block 把按钮变为块状元素,这个按钮独占一行
按钮块级应用
按钮禁止点击
.btn
disabled
按钮元素
能做按钮的元素有
<button></button>
<a></a>
<input/>
图片
1.img-arounded 圆角
2.img-circle 圆形
3.img-thumbnail 边框
辅助类-----start
文本颜色
.text-muted 灰色
.text-primary 蓝色
.text-success 绿色
.text-info 青色
.text-warning 黄色
.text-danger 红色
文本背景颜色
.bg-primary 蓝色
.bg-success 绿色
.bg-info 青色
.bg-warning 黄色
.bg-danger 红色
.close关闭按钮
<span class='close'>×</span>
.caret下三角
和更多形成按钮用比较多
浮动
.pull-right
.pull-left
.clearfix
块级元素居中
.center-block
隐藏/显示
.hide/.show
辅助类-----end
响应式工具
.table-responsive
.img-responsive
表单
.form-group
.form-control
.checkbox
.radio
表单的水平排列的表单
.form-horizontal
.form-group
.control-label
.form-control
表单的内联表单
.form-inline
.form-group
.form-control
表单的输入空组
.input-group
.input-group-addon
css组件--------------------------------------------start--------------------------------------------
字符图标
随意改大小不会失真
如.glyphicon glyphicon-education作用于span上面
上拉菜单/下拉菜单
<div class='dropdown pull-right'>
<button class='btn btn-primary' data-toggle='dropdown'>更多课程 <span class='caret'></span></button>
<ul class='dropdown-menu dropdown-menu-right'>
<li><a href=''>百度</a></li>
</ul>
</div>
上拉下拉菜单内容的标题和分割线
<li class='dropdown-header'>周一事项</li>
<li class='divider'></li>
上拉下拉菜单的禁用
.disabled
按钮组
.btn-group
.btn btn-primary
.btn btn-warning
按钮工具箱
.btn-toolbar
.btn-group
.btn btn-primary
按钮组尺寸
.btn-group-lg
.btn-group-sm
.btn-group-xs
按钮组与下拉菜单组合
.dropdown-toggle
data-toggle='dorpdown'
.dropdown-menu
按钮组与下拉菜单组合垂直
.btn-group-vertical
按钮组两端对齐
.btn-group-justified
按钮组和下拉菜单组合
导航
.nav
.nav-tabs
.nav-pills
.nav-stacked
导航条
.navbar
.navbar-default
.navbar-inverse
.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
«
»
分页的激活和禁用状态
.disabled
.active
分页的上一页下一页
.pager
分页的两端对齐
.previous
.next
标签
.label
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger
徽章
badge
徽章的样式与列表组:
.list-group
.list-group-item
.badge
巨幕
.jumbotron
页头
.page-header
缩略图
.thumbnail
缩略图与自定义内容
.thumbnail
.caption
警告框
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger
警告框实例
.alert
.close data-dismiss='alert' × 警告框的关闭
警告框中的链接
.alert-link
进度条的颜色和条纹
.progress
.progress-bar
.progress-success
.progress-info
.progress-warning
.progress-dager
.progress-bar-striped 条纹
进度条激活
.active
进度条动态
媒体对象
.media
.media-left 左边的
.media-right 右边的
.media-middle 图标中间对齐
.media-top 图标上面对齐
.media-bottom 图标下面对齐
.media-object 两边的图标
.media-body 中间的内容
.media-heading
列表组
.list-group
.list-group-item
.active激活
.disabled禁用
.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
面板
.panel
.panel-heading 头部
.panel-title 标题
.panel-body 中间
.panel-footer 底部
面板与列表组组合1
把列表组放到面板的.panel-body里面
如果要去掉间隔,则把panel-body去掉
面板与列表组组合2
与栅格系统一起用
把列表组放到面板的.panel-body里面
如果要去掉间隔,则把panel-body去掉
面板与表格组合
与栅格系统一起用
把列表组放到面板的.panel-body里面
如果要去掉间隔,则把panel-body去掉
自适应的内嵌框架
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
iframe .embed-responsive-item
里面可以放视频
well
.well-lg
.well-sm
.well可以与.pre比较
css组件--------------------------------------------end--------------------------------------------
jeqeury下的插件
3.插件
1)模态框
2)下拉菜单
3)滚动监听
4)标签页
5)工具提示
6)弹出框
7)警告框
8)按钮
9)折叠效果
10)幻灯片效果
11)固定侧边栏
模态框(js弹框)
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer
滚动监听
body设置相对定位
data-spy='scroll'
data-target='#myNav'
data-offset='150'
id='myNav'
折叠效果
使用面板来回隐藏
幻灯片
幻灯片图片
指示灯
左右控制
回到顶部
5058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
