学习boostrap1周总结

bootstrap框架主体为一行十二列 对着标签的class选择器添加属性
container为固定宽度的框container-fluid为百分比的框
row为创建新的一行 一行最多12列 多余的自动换行
col-在xxx尺寸-几列 最常用 用于设置div的大小 这个属性为row的子属性
使用col-xxxx-offset-xxxx类可以将列向右偏移,例如,col-xs-offset-4表示在超小屏幕上时,将元素向右偏移4列。
在一个row中嵌套row为新建一行新的12列

使用时需要先加载css文件 其中有需要js文件的内容比如轮播图和监听
加载js前需要加载jq框架提供的js文件是jq写出来的

我个人理解的框架为给class选择器添加各种类 命名为添加的属性+属性的需求

.table 表格必须的基类
.table-bordered 带边框的表格
.table-striped 带条纹的表格(隔行变色)
.table-hover 鼠标悬浮时为整行添加背景色
.table-condensted 紧凑的表格(减少了单元格padding)
当屏幕宽度不足以显示所有的表格内容时,表格内容会出现折叠甚至溢出的现象。为了解决这个问题,我们可以将.table元素放到一个具有.table-responsive类的元素内容。
可以理解为响应式结构为属性+responsive

按钮有4个属性标签有7个样式4个大小
btn btn-default
btn btn-primary
btn btn-success
btn btn-danger
4个属性
btn-primary
btn-success
btn-danger
btn-warning
btn-info
btn-link
6个样式
lg大 默认中 sm小 xs超小

图片有3个属性
.img-rounded 圆角的图片
.img-circle 圆形图片
.img-thumbnail 缩略图

框架提供的文本颜色分为6类
text-muted
text-primary
text-success
text-info
text-warning
text-danger

背景颜色有5种

bg-primary
bg-success
bg-info
bg-warning
bg-danger

为元素添加.pull-left或.pull-right可以让元素左右浮动;为浮动元素的父元素添加.clearfix就可以清除浮动。

hidden-xs 只有在超小屏幕上时隐藏
hidden-sm 只有在小屏幕上时隐藏
hidden-md 只有在中等屏幕上时隐藏
hidden-lg 只有在大屏幕上时隐藏
visible-xs-* 只有在超小屏幕上时才显示,在其他尺寸的屏幕上一律隐
visible-sm-* 只有在小屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
visible-md-* 只有在中等屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
visible-lg-* 只有在大屏幕上时才显示,在其他尺寸的屏幕上一律隐藏
星号(*)可以有3中取值,分别是
block 以块元素的形式显示
inline 以行内元素的形式显示
inline-block 以行内块元素的形式显示

center-block为块元素居中 在子元素中使用可以居中在父元素中

在button的class选择器内添加data-toggle=“modal” 表示按钮是用来切换模态框的显示和隐藏
data-target="#mymodal" 表示按钮切换的目标模态框是谁,这里是ID属性为mymodal的模态框
data-dismiss=“modal” 表示该按钮具有关闭模态框的功能
modal-有3个属性 lg 默认和 xs 对应大中小

id=“mycarousel” 轮播的ID
data-interval=“3000” 控制图片轮播的速度
data-pause=“hover” 鼠标悬浮到图片上时,是否暂停轮播
data-keyboard=“true” 是否能可以用键盘的左右键控制轮播
data-wrap=“true” 是否循环轮播

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值