bootstrap学习

发表于 | 分类于 ， ， | 阅读次数:

栅格系统

  • 分12列
    row
    col
  • 阈值
    1200 >=
    992 >=
    768 >=
    768 <
  • 语法
    col-lg-
    col-md-
    col-sm-
    col-xs-
  • 组合模式
    实例：bs官网
  • 其他
    列偏移
    col-[]-offset-
    列排序
    col-[]-push-
    col-[]-pull-
    嵌套
    清浮动

响应式工具

  • 概念
    针对不同设备展示或隐藏页面内容
  • 可见类
    visible--
    • lg md sm xs
    • block inline inline-block
      hidden-*
  • 打印类
    visible-print-* hidden-print
    实例：天猫侧边栏

Glyphicons 字体图标

预定义样式风格

  • primary 首选项
  • success 成功
  • info 一般信息
  • warning 警告
  • danger 危险
  • 实例：登录框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="containter">
	<br>
	<input type="button" value="默认样式">
	<input type="button" value="首选项" class="btn btn-primary">
	<input type="button" value="成功" class="btn btn-success">
	<input type="button" value="一般信息" class="btn btn-info">
	<input type="button" value="警告" class="btn btn-waring">
	<input type="button" value="危险" class="btn btn-danger">
	<br>
	<br>
	<p>默认段落</p>
	<p class="bg-primary">首选项</p>
	<p class="bg-success">成功</p>
	<p class="bg-info">一般信息</p>
	<p class="bg-warning">警告</p>
	<p class="bg-danger">危险</p>
	<br>
	<span>默认文字</span>
	<span class="text-primary">首选项</span>
	<span class="text-success">成功</span>
	<span class="text-info">一般信息</span>
	<span class="text-warning">警告</span>
	<span class="text-danger">危险</span>
	<br>
	<a href="#" class="btn btn-primary">链接1</a>
	<a href="#" class="bg-success">链接2</a>
	<a href="#" class="text-danger">链接3</a>
	<br>
	<br>
	<div class="alert alert-warning">我是警告框</div>
	<div class="alert alert-danger">我是危险信息</div>
	<br>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h4>我是面板的标题</h4>
		</div>
		<div class="panel-body">
			我是面板的主体内容！
		</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="panel panel-primary">
	<div class="panel-heading">
		<div class="form-group">
			<label for="">用户名</label><input type="text" class="form-control">
			<div class="alert alert-warning">用户名不能为空！</div>
			<label for="">密码</label><input type="password" class="form-control">
		</div>
		<a href="#" class="text-primary">忘记密码？</a>
		<input type="button" class="btn btn-primary pull-right" value="登录">
	</div>
	<div class="panel-body"></div>
</div>

按钮

  • 基类
    btn
  • 样式
    btn-default 默认
    btn-link 链接
  • 大小
    btn-*[lg,sm,xs]
  • 状态
    active
    disabled
  • 种类
    a, input, button
  • 块级
    btn-block
  • 按钮组
    btn-group
    btn-group-justified
    btn-group-vertical
    -实例：GitHub按钮组

下拉菜单

  • 属性
    data-
    aria-
    role
  • open
  • dropdown-menu-right
  • dropdown-header
  • divider
  • 例子：运动且带图标的菜单

标签页

  • 头部
    nav
    nav-tabs
    nav-justified
    nav-tabs-justified
    nav-pills
    nav-stacked
    带下拉菜单的头部
  • 内容
    tab-content
    tab-pane
    data-toggle=”tab”
    href对应id
    淡入淡出方式
    鼠标移入方式
    带下拉菜单的切换
  • 导航条
    navbar
    navbar-default
    nav navbar-nav
    navbar-inverse
    navbar-static-top
    navbar-fixed-top
    navbar-fixed-bottom
    遮挡内容的问题
    navbar-header
    navbar-brand
    navbar-left
    navbar-right
    navbar-btn
    navbar-link
    navbar-text
    navbar-form
    例子：知乎导航条
    下拉菜单
    响应式导航条
    navbar-toggle
collapse navbar-collapse
    滚动监听
    data-spy
data-target
data-offset

引用参考：https://study.miaov.com/v_show/59