简介BOOtstrap
boot提供了一套完整的css, 以及匹配的js。需要什么东西,直接到文档内进行挑选使用就可以了,甚至可以支持自定义。移动端优先
Bootstrap里面的一些功能实现
一. 栅格系统
-
容器:.container
boot是响应式框架,所以容器在不同分辨率会具有不同的宽度,
如下表: -
依然逃不掉的先分行,再分列
行:.row
列:这就多了去了
1, .col 如果是子元素平分父级的宽度,则直接使用.col
2, .col-sm-num :这个class中,num代表一个数字(从1-12)。boot的栅格系统把一行分成12份,num代表份数。 而中间的type对应上文图中的 small。意为,在浏览器宽度大于等于 576,小于 768的时候,在栅格系统中所占有的份数
对应的class还有
Col-num
Col-sm-num
Col-md-num
Col-lg-num
Col-xl-num -
单元格的对齐方式
.align-items-start
.align-items-center
.align-items-end
.justify-content-start
.justify-content-center
.justify-content-end
.justify-content-around
.justify-content-between -
其他
.w-100 用于折行
Order : 用于排序
.order-num, 数字代表排序优先级,数字越大越靠后
另外,.order-first 一定可以把一个元素放在第一位
.order-last 一定可以把一个元素放在最后一位
Offset: 用于设置偏移量
.offset-num
.offset-type-num
二,组件
- 预定义风格:通用颜色
primary, secondary, success, danger, warning, info, light, dark, link - 按钮
Example: 举个栗子
<button type="button" class="btn btn-dark">Dark</button>
按钮可以使用 button, input, a标签来实现
Outline buttons: 空心按钮
<button type="button" class="btn btn-outline-light">Light</button>
Size: 可以修改的尺寸
.btn-lg / .btn-sm 默认md
State: 是按钮,那就一定有状态
.active可以让按钮的颜色更鲜艳
而 .disable则会让按钮的颜色变淡 (注意加disable属性哦~)
Button group: 按钮组
<div class="btn-group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Size: .btn-group-lg, .btn-group-sm
Vertical model:.btn-group-vertiacl
3. 下拉菜单
.dropdown
.dropdown-toggle button
.dropdown-menu ul
交互实现要点: data-toggle=“dropdown”
实现各方向下拉,给父级加:dropup,dropright,dropleft
带交互,先引入js
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
- 选项卡
头部:
ul.nav>li.nav-item*2>a.nav-link
水平对齐方式:可以使用flex来修改水平对齐方式,默认情况下导航是左对齐的,但是你可以很轻松的修改成居中或者左对齐
justify-content-center,justify-content-end
.flex-column 甚至可以垂直排列
不同风格:
ul.nav.nav-tabs>li.nav-item*2>a.nav-link.active
ul.nav.nav-pills>li.nav-item*2>a.nav-link.active
还可以在头部加入下拉菜单:
ul.nav.nav-tabs>li.nav-item.dropdown>a.nav-link+ul.dropdown-menu
内容区:
.tab-content>.tab-pane*3
功能实现:
- 每一个内容区需要有一个id
- 每一个选项需要加上 data-toggle=”tab” 用于触发js功能
- 然后选项上a标签的href对应内容区的ID 用于查找目标
- 导航条
- 轮播以及巨幕
- 模态框
- 表单以及输入组
- 滚动监听
- 工具类