移动自适应代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

引用

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

容器
Container
响应式图像
img-responsive

row
超级小(<579px): : .col
大于超小设备手机(≥576px) : .col-sm-
小型设备平板电脑(≥768px) : .col-md-
中型设备台式电脑(≥992px) : .col-lg-
大型设备台式电脑(≥1200px): .col-xl-
设定小文本 (设置为父文本的 85% 大小)
small
设定文本居中对齐
text-center
text-left(左对齐)
text-right(右对齐)
设定文本对齐,段落中超出屏幕部分文字自动换行
text-justify
设定单词首字母大写
text-capitalize
移除默认的列表样式
(.list-unstyled)列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
将所有列表项放置同一行
list-inline

代码块
内联显示代码(比较简短,可插入文章的)
code 标签
需要被显示为一个独立的块元素或者代码有多行
pre 标签

图片
图片圆角:img-rounded
圆形:img-circle
加内边距和黑色边框:img-thumbnail
图片响应式:img-responsive

辅助类
.text-danger:定义danger色字体
.bg-danger:定义背景
元素浮动到左边:pull-left
元素浮动到右边:pull-right
设置元素为 display:block 并居中显示:center-block
清除浮动:clearfix
元素显示:show
元素隐藏:hidden
除了屏幕阅读器外,其他设备上隐藏元素:sr-only
与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户):sr-only-focusable
显示关闭按钮:close
显示下拉式功能:caret

Last modification:December 9th, 2020 at 03:40 pm
If you think my article is useful to you, please feel free to appreciate