# bootStrapt
**Repository Path**: wdwy/bootStrapt
## Basic Information
- **Project Name**: bootStrapt
- **Description**: 学习boot的案例以及笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-10-25
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 学前必备知识
如何做网页手机适配
声明元标签Viewport
1. 流式布局
2. 所有容器使用相对尺寸，不用觉对尺寸
3. 所有图片使用相对尺寸，不用觉对尺寸
4. 使用媒体查询技术
1. 根据媒体查询结果执行不同的外部css文件
//屏幕
//打印机
2. 根据媒体查询结果执行不同的css片段
/*pc屏幕>992px;ipad屏幕768px-991px;phone屏幕<767px*/
@meida screen and (max-width:767px){
//手机屏幕
}
@media screen and (max-width:991px;min-width:768px){
//平板屏幕
}
@media screen and (min-width:992px){
//pc屏幕
}
## 一、起步
1. 使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）
2. 基本模板
Bootstrap 101 Template
你好，世界！
## 二、全局样式
### 1.按钮
.btn 按钮基础样式
.btn-default
.btn-primary/danger/success/...按钮颜色
.btn-block块级按钮
.btn-lg/sm/xs 按钮大小
### 2.图片
.img-rounded/circle
.img-responslive:css {width:100%;//会随着屏幕变大变大
max-wdth:100%;//会随着屏幕变大变大,但不会超过其原始大小}
.img-thumbnail: 缩略图
### 3.文本
.text-danger/success/... 文字颜色
.bg-danger/success/.... 背景颜色
.text-left/center/right/justify 对齐方式
.text-uppercase/lowsercase/capitailze 转换
### 4.列表
内联样式列表 .list-inline
无样式列表 .list-unstyled
### 5.表格
.table 基本样式
.table-bordered 带边框的表格
.table-striped 隔行变色的表格
.table-hover 带悬停变色的表格
.table-responsive 响应式表格（书写特殊:其为.table的父级)
| 编号 |
姓名 |
手机号 |
地址 |
| 1 |
委屈 |
10087 |
地球 |
### 6.栅格系统
>简单易控制，渲染速度快，支持响应式
1. 最外层必须放一个容器 _`div.container/div.container_fluid`_
2. 每一行必须用row `div.row`
3. 在行中用col `div.col`
4. 三者之间的包容关系 `container>row>col`
5. 响应 col-xx-num
6. 偏移col-xx-offset-num
7. 适用性问题
.col-xs-* 适用于xs/sm/md/lg
.col-sm-* 适用于sm/md/lg
.col-md-* 适用于md/lg
不同屏幕大小，跨列数量不能相等，相等报错
8. 列隐藏
.hidden-lg //在超大屏幕上隐藏该列
.hidden-md //在中等屏幕上隐藏该列
.hidden-sm //在小屏幕上隐藏该列
.hidden-xs //在超小屏幕上隐藏该列
原因：css有继承样式，加上！import可以覆盖父级的样式
隐藏功能没有适用性问题
9. 栅格系统可以进行嵌套
.row>
.col-*-*>
.row>
.col-*-*...
10. 详情见 [http://v3.bootcss.com/css/#grid](http://v3.bootcss.com/css/#grid)
## 三、
## 四、
## 五、工具
>Bootlint 是BootStrapt官方检测HTML的工具
//引入插件
//调用其中的一个方法