Bootstrap
视口
viewport 视口,即浏览器上网页内容可视区域
内容 | 含义 |
---|---|
width = device-width | 视口的宽度,大多数手机浏览器视口的宽度为980。 device-width表示采用设备的宽度 |
initial-scale=1 | 移动设备上,打开页面时的初始化缩放级别 1表示100%, 5表示500% |
minimum-scale=1 | 移动设备上,页面可以 最小缩放的级别 |
maximun-scale=1 | 移动设备上,页面可以 最大缩放的级别 |
user-scalable=no | 移动设备上,页面禁止缩放 一旦设置,则前两个的scale设置无效 |
- 使用方式
1 | <meta name="viewport" content="width = device-width, minimum-scale=1"> |
布局容器
任意元素使用了布局容器样式,都会变成一个布局容器,建议使用div作为布局容器
.container类 | 用于固定宽度并支持响应式布局的容器 【特点:居中,两侧留白】 |
.container-fluid类 | 用于100%宽度,占据全部视口(viewport)的容器 |
示例
1 | <div class="container"> |
栅格系统
基本书写方式
容器=>行=>列 在列中书写内容
- 其中行(row)必须包含在.container或者.container-fluid中
- 行使用的样式”.row”;列使用样式”.col- # - #”
栅格参数:”col-屏幕尺寸-占用列数”
1 | <div class="container"> |
屏幕尺寸简述
尺寸 | 简述 |
---|---|
large:lg | 大屏幕 一般PC尺寸 |
medium:md | 中等屏幕 小PC尺寸 |
small:sm | 小屏幕,ipad尺寸 |
x small:xs | 超小屏幕,智能手机尺寸 |
注意事项
设置屏幕尺寸的时候如果设置了一个屏幕尺寸,比这个尺寸大的屏幕会继承当前的设置。比这个尺寸小的屏幕会变成一个元素一行。
列偏移
将列元素项向右进行偏移
1 | <div class="col-lg-3 col-lg-offset-5"> |
列排序
1 | <div class="row"> |
列表
list-inline
修改前
1 | <ul> |
修改后
1 | <ul class="list-inline"> |
按钮
颜色
1 | <!-- Standard button --> |
尺寸
1 | <p> |
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
1 | <button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button> |
激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过 .active
类实现的。然而,你还可以将 .active
应用到 <button>
上(包含 aria-pressed="true"
属性)),并通过编程的方式使其处于激活状态。
1 | <button type="button" class="btn btn-primary btn-lg active">Primary button</button> |
禁用状态
1 | <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> |
导航条
初始代码
1 | <nav class="navbar navbar-default"> |
具体内容:
首页修改
1 | //首页的修改 |
汉堡按钮
1 | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> |
导航栏主体部分
1 | <!-- 主体部分 --> |
轮播图
帮助手册位置:JavaScript 插件–Carousel
1 | <!--轮播图--> |
1 | //首页的修改 |