标签：max png table column 就是 并且 phone device 是什么
container 是最基本的lagyout 元素, 并且当使用默认的Grid 系统时, containers 是必须的.
<div class="container"> <!-- Content here --> </div>
使用 .container-fluid 获取一个全宽的容器.
<div class="container-fluid"> ... </div>
下面讲到网格的时候会有例子可以这两个的区别
为适应不同的屏幕大小,当界面变化时进行特定界面变化.bootstrap 定义了一些屏幕大小.分别对应 : sm , md , lg , xl , (英文单词).
// Extra small devices (portrait phones, less than 576px) @media (max-width: 575px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
假如我们需要在css文件中指定某个特定的屏幕大小的属性.如下
@media screen and (min-width: 992px) { .nav-btn button { font-size: 24px; padding:4px 8px; line-height: 7; border:none; background: none; outline:none; } }
注: min 和 max 就像数学中的上下限.
bootstrap 分为12 个网格,
<div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div>
row 中管理着是三个col, 上面代码三个col平分了整个row, –sm 是什么意思呢? 就是在屏幕尺寸在sm及以上的都是平分的,而小于它的将会从上往下排
把container 换成是 container-fluid ,可以看到屏幕宽度被均匀铺满,而container 是水平居中．网格中需要注意的有:
<div class="container"> <div class="row "> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div>
标签：max png table column 就是 并且 phone device 是什么
原文地址：https://www.cnblogs.com/Benjious/p/9637695.html
