bootstrap grid用法

百变鹏仔 1个月前 (11-14) #bootstrap

文章标签 bootstrap

bootstrap grid的用法：1、使用container来包裹div；2、在div里面设置行；3、设置列能够快速对这个框架进行搭建；4、通过拖拽浏览器来改变宽窄即可。

本文操作环境：Windows7系统、bootstrap3、Dell G3电脑。

bootstrap的grid怎么使用？

div使用container来包裹，然后在里面设置行，设置行后再设置列能够快速对这个框架进行搭建

<div>            <h1>Hello, world!</h1>                     <div>                <div>                    <p>                    第一列占1个md                    </p>                </div>                         <div>                    <p>                        这个是第二列 占 2 个md                    </p>                </div>                <div>                        <p>最后一个md占9个列                        </p>                </div>            </div>        </div>

保障总数为12个，通过拖拽浏览器改变宽窄可以看出变化。

此外屏幕大小也会影响，这个时候列的class也要使用大型的那个col，通过拖拽浏览器可以看出变化。

<div>            <div>                <div>                    中型占6，大型占4                </div>                <div>                    中型占6，大型占8                </div>            </div>        </div>

整个格栅大小分配

.col-xs- 超小屏幕 手机 (<p>推荐：《<a href="https://www.php.cn/bootstrap/" target="_blank">bootstrap教程</a>》</p>

文章推荐

bootstrap grid用法

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式