1、
布局:基础的CSS是移动设备优先
响应式网格系统随着屏幕或视口尺寸的增加,系统会自动文芬最多12列
工作原理:必须放置在.container class内,以便获得适当的对齐(alignment)和内边距(padding)
2、媒体查询
/* 超小设备(手机,小于 768px) */ /* 小型设备(平板电脑,768px 起) */ /* 中型设备(台式电脑,992px 起) */ /* 大型设备(大台式电脑,1200px 起) */
3、网格选项
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最小列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
4、列偏移:使用 .col-md-offset- 类
5、视口
视口:可视窗口的区域
<Meta name="viewport" content="width=device-width, initial-scale=1.0">中
width=device-width 表示让视口的宽度等于设备的宽度
initial-scale=1.0 表示初始化的缩放比例为1:1
user-scalable = yes 表示是否可以缩放
maximum-scale=2 表示最大放大比例为2倍
minimum-scale=0.5 表示最小缩小比例为0.5
6、表格
.table:基本表格
.table-striped:条纹表格(斑马线)
.table-bordered:每个元素周围都有边框,且占整个表格是圆角的
.table-hover:当指针悬停在行上时会出现浅灰色背景
.table-condensed:行内边距(padding)被切为两半
7、表单
垂直或基本表单 <form role="form">
内联表单 <form class="form-inline" role="form">
水平表单 <form class="form-horizontal" role="form">
8、按钮
类 | 描述 | 实例 |
---|---|---|
.btn | 为按钮添加基本样式 | 尝试一下 |
.btn-default | 默认/标准按钮 | 尝试一下 |
.btn-primary | 原始按钮样式(未被操作) | 尝试一下 |
.btn-success | 表示成功的动作 | 尝试一下 |
.btn-info | 该样式可用于要弹出信息的按钮 | 尝试一下 |
.btn-warning | 表示需要谨慎操作的按钮 | 尝试一下 |
.btn-danger | 表示一个危险动作的按钮操作 | 尝试一下 |
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) | 尝试一下 |
.btn-lg | 制作一个大按钮 | 尝试一下 |
.btn-sm | 制作一个小按钮 | 尝试一下 |
.btn-xs | 制作一个超小按钮 | 尝试一下 |
.btn-block | 块级按钮(拉伸至父元素100%的宽度) | 尝试一下 |
.active | 按钮被点击 | 尝试一下 |
.disabled | 禁用按钮 |
9、辅助类
pull-left 浮动到左边
pull-right 浮动到右边
clearfix 清除浮动
show 强制元素显示 (display)
hidden 强制元素隐藏 (display)
10、响应式实用工具
visible-xs 仅在超小屏显
visible-sm 仅在小屏幕显示
……
hidden-xs 仅在超小屏隐藏
hidden-sm 仅在小屏隐藏
11、插件
模态框(菜鸟)Bootstrap 模态框(Modal)插件 | 菜鸟教程
标签页 tab切换 Bootstrap 标签页(Tab)插件 | 菜鸟教程
手风琴 (菜鸟)Bootstrap 折叠(Collapse)插件 | 菜鸟教程
轮播图 (菜鸟)Bootstrap 轮播(Carousel)插件 | 菜鸟教程
附加导航(吸顶) Bootstrap 附加导航(Affix)插件 | 菜鸟教程
原文地址:https://www.jb51.cc/wenti/3280553.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。