bootstrap公共样式

浮动相关

• 在按钮标签中添加.close类与内容×来实现关闭按钮的显示
• 为类添加.float-left、.float-right实现元素的左浮动与右浮动，而.float-none会默认不显示浮动效果
• 为了清除浮动，可以在浮动的父元素中添加类.clearfix来实现清除浮动的效果
• .float-left与.float-right也可以实现响应式布局，只要输入代表屏幕大小的关键字就可以。例如：.float-md-left
• 添加类.text-hide可以隐藏元素内容，但是SEO仍然可以识别到该元素
• .overflow-auto与.overflow-hidden用来实现当文本内容超出区域时是否会出现滚动条，.overflow-auto会自动显示与隐藏，而.overflow-hidden只会隐藏
• 使用.visible与.invisible实现内容的可见与不可见
• 使用.align-*实现文本的对齐，*可以取值为：baseline(基线)、top(顶部)、middle(居中)、bottom(底部)、text-top(文本顶部)、text-bottom(文本底部)

位置相关

• 使用.p-*与m-来设置内边距的大小与外边距的大小，其中的取值可以为0_{5或者auto,0}5距离逐渐增大
• 可以设置外边距或者内边距的某个方向，使用.pt-*就是内边距的顶端padding-top的缩写，其他内边距与外边距同理
• 使用.px-*与mx-*可以设置左右内边距与外边距；使用.py-*与my-*可以设置上下内边距与外边距
• 对于内边距与外边距也支持响应式布局
• 使用.w-*与.h-*实现对宽度与高度的设置。*包括25，50,75,100与auto
• 使用.mw-*与.mh-*设置max-width与max-height
• 使用vw-*与vh-*来实现视口的宽度大小与高度大小
• 使用.shadow-*实现阴影效果，*可以不加，也可以是lg，sm与none，分别代表不同的阴影效果

字体样式

• 使用.d-*添加display属性，*可以是none，inline，block，inline-block，table，table-row。也可以实现响应式布局
• 为了实现嵌入式布局，可以在父元素中添加.embed-responsive实现嵌入式响应，同时可以添加类.embed-resopnsive-16by9来实现16:9布局，还可以为21:9，4:3，1:1
• 使用.text-*实现文本对齐，可以为left，center，right，可以实现响应式布局
• .text-nowarp与.text-warp来实现文本移出时是否换行，nowarp代表不换行。.text-break用于实现很长的字符串，并且文本中没有空格时也能实现换行
• .text-lowercase设置字母小写，.text-uppercase设置字母大写，.text-capitalize设置首字母大写
• .font-weight-bold实现字体加粗，.font-weight-normal实现字体正常，.font-weight-light实现字体纤细，.font-italic实现字体倾斜
• .text-monospace实现等宽字体，.text-reset实现文字颜色的重置，.text-decoration-none删除下划线