标签搜索

初识Bootstrap

果氢cdm
2022-02-08 / 0 评论 / 2 阅读 / 正在检测是否收录...

这是一个实例

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一个响应式页面,重置浏览器大小查看效果!</p> 
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
        <h3>第一列</h3>
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
        <h3>第二列</h3>
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
        <div class="col-sm-4">
        <h3>第三列</h3>        
        <p>菜鸟教程</p>
        <p>学的不仅是技术,更是梦想!!!</p>
        </div>
    </div>
</div>

个人理解

第一眼看完就知道这是一个先统一好了样式的"框架"(本质上就是一个样式表和一堆写好的js功能)

例如:container和mt-5
kzdpzmd9.png
kzdpzzq6.png

也确实如此,预先定义好样式直接反向绑定class样式

这样学习起来就简单,玩拼图嘛hhhh要什么拼什么

0

评论 (0)

取消