Bootstrap第2天
2024-09-05 06:33:32
Bootstrap第2天
解决IE低版本不支持HTML5元素的方法
CSS全局样式——栅格系统
1、栅格系统介绍
Bootstrap提供了一套响应式、移动设备优先的流式的栅格系统。
Bootstrap把一个容器或整个网页平均分成了12列。
Bootstrap的栅格系统,由一个行(.row)和多个列构成。
栅格系统通过行列的形式来创建网页布局。把具体的数据放入列当中。
注意:栅格系统,必须放在.container和.container-fluid之中。
2、栅格系统参数
3、栅格系统的简单应用
注意:如果列数超出12列,则会自动换行。如果列数低于12列,则无所谓。
4、列偏移
也就是指:一个栏向右偏移多少个列。
.col-md-offset-*
.col-md-offset-2 //指定的栏向右偏移2个列。
5、列嵌套
列嵌套:就是在某个栏中,再嵌套一个完整的栅格系统。
表单样式
- .form-group表单组样式:将<label>和表单元素包含其中,可以获得更好的排列。
- .form-control表单元素样式:常用于<input>、<textarea>、<select>元素。
- .form-inline内联表单样式(用于form元素):可以使元素一行排列。
- .checkbox复选框样式
- .radio单选框样式
- .disabled可以禁用单选框或复选项的文本。
- .form-horizontal水平排列的表单(用于form元素)。
- .sr-only:可以用于隐藏元素。
- .checkbox-inline 控制多个复选框元素在同一行显示。
- .radio-inline控制多个单选框元素在同一行显示。
按钮样式
- 可作为按钮使用的元素:<a>、<input>、<button>
- .btn:按钮的全局样式。<input type = "button" class = "btn">
- 预定义样式:.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link
- .active按钮激活状态、.disabled按钮禁用状态
- 按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮)
- .btn-block:将按钮拉伸到撑满整个父元素。
最新文章
- git命令查看远程分支
- Objective C中数组排序几种情况的总结
- 详解 iOS 上机题!附个人见解
- Ubuntu开机自启动
- iOS Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3512.30.14/UITableView.m:7962
- Linux 下子线程 exit code 在主线程中的使用
- 【SpringMVC】SpringMVC系列4之@RequestParam 映射请求参数值
- PHP中的赋值运算符
- ubuntu_常用命令_01
- 显示回收站.reg
- 安全通信 QSslSocket
- angularJS 服务二
- ajax上传图片
- C# WebApi过滤器(开发接口必备利器)
- python自动化开发-5b
- Angularjs 地址联动2.1.1
- Docker与.Net项目类型
- hadoop zookeeper高可用
- Quartz(强大的定时器)
- Android DatePickerDialog和TimePickerDialog显示样式