botstrap相关使用总结

学习bootstrap相当于学习里面的类名
一,css样式-----------------------------------------------------
1，按钮样式，按钮颜色，按钮尺寸: .btn-lg (大型)、.btn-sm(小型) 或 .btn-xs(超小型) 默认中型，块级按钮 btn-block 底层原理: display: block; width: 100%;
2，normalize ==> [进行浏览器样式统一，解决一定的兼容性]
3，响应式容器：
3-1 container
特征:
(1) 有一个响应式的版心
大屏 1200以上 版心1170px
中屏 992-1200 版心970px
小屏 768-992 版心750px
超小屏 768以内 100%
(2) 有默认的左右 padding 值 15px

3-2 container-fluid (了解) 流式布局容器
特征:
(1) 宽度 100%
(2) 有默认的左右 padding 值 15px
3-3 row类,
作用: 用于抵消父元素的 左右默认 padding 值
本质原理: margin左右负值
4.栅格布局
4-1栅格系统: 将一行分成12列, 为了方便分配父元素空间
4-2栅格系统原理: 浮动 + 百分比 + 媒体查询

  **4-3**语法: .col-xx-x
  lg  large  大屏以上生效
  md  middle 中屏以上生效
  sm  small  小屏以上生效
  xs  xSmall 任意屏幕都生效
*/
**5.列嵌套**: 在使用了栅格系统进行分配空间的盒子内, 再次使用栅格系统分配空间
**6. 列偏移:** 
 1. 百分比的 margin-left
 2. 结合了 媒体查询

语法: col-xx-offset-x
7.类名运用
大标题, h1-h6类 《a class=“h1” href="#"》我是a链接《/a》
对齐方式 《p class=“text-left”》左对齐《/p》
表格
1. 添加上 table 类, 就可以有表格样式效果
2. table-bordered 加边框
3. table-hover 鼠标悬停
8. 隐藏语法:
0-768-992-1200-
1. hidden display:none; 让盒子在任意屏幕都隐藏
2. hidden-lg 大屏隐藏, 其他屏不管
3. hidden-md 中屏隐藏, 其他屏不管 本质: 给992-1200的盒子设置 display: none;
4. hidden-sm 小屏隐藏, 其他屏不管
5. hidden-xs 超小屏隐藏, 其他屏不管

需求: 一个盒子大屏, 中屏显示, 小屏, 超小屏隐藏
二，组件与js---------------------------------------------------------------------------
1，字体图标 添加类即可
1-1. glyphicon 指定字体
1-2. glyphicon-heart 指定具体哪个图标
2，导航条
1. navbar-inverse 反色的导航条
2. container-fluid流式布局容器(宽度100%) => 改成 container
3，进度条
3-1. progress-bar-striped（了解） 添加条纹效果
3-2. active 添加动画效果
4，引入组件进行删和不删
4-1 bootstrap中, 所有 data- 开头, 都是有功能的, 不能随便删
data-toggle=“modal” 作用： 告诉bootstrap这个按钮是用来切换模态框显示的
data-target="#myModal" 作用： 通过 id 标记显示哪个模态框, 通过 id 关联的
4-2给盲人设备使用的
1. role开头的属性, 可以直接删除
2. aria-开头的属性, 可以直接删除
3. class=“sr-only” 的标签可以直接删除
5.轮播图
需求:
1. 对于 > 640 的屏幕, 加载 大图片, 大图片应该是定高居中的
2. 对于 <= 640 的屏幕, 加载 小图片, 小图片应该是宽高自适应的

小圆点 (指示器) data-slide-to 里面是指向的图片的索引
bootstrap里面的轮播图是基于定位实现的
控制器, 左右箭头
data-slide=“prev” 作用: 切换到上一张
data-slide=“next” 作用: 切换到下一张

pc端

实现思路:
1. 大屏加载大图, 小屏幕加载小图 (通过js检测屏幕宽度决定)
2. 通过媒体查询给大屏幕添加额外的样式
/* 注意: 以下样式只在 > 640 的屏幕生效 => 媒体查询 /
.carousel-inner .item {
height: 410px;
/ 作用让溢出的图片隐藏 /
overflow: hidden;
/ 注意: 不要给 item 添加 position: relative;
由于轮播图是通过定位实现的, 所以不需要再加定位
/
}
.carousel-inner .item img {
height: 410px;
/ 让宽度可以溢出 /
max-width: none;
/ 居中 */
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
6.tab栏结构分析
tab 栏切换注意点:

1. data-toggle=“tab” 用于告诉bootstrap当前 a 标签可以用于切换 tab 栏
2. href="#home" 对应切换的面板的 id, 需要关联 id