zoukankan      html  css  js  c++  java
  • bootstrap栅格系统

    bootstrap的栅格系统用于通过row与column的组合来布局页面布局

    row必须包含在 containercontainer-fluid

    使用bootstrap要先引入bootstrap的css和js文件,jquery文件,bootstrap是基于jquery的框架,所以在引入bootstrap的js文件之前,需要先引入jquery文件

    举个例子

    实现下面的效果

     只需要给div加上bootstrap的class名就好了

    每一行row分为12列col,根据需要来进行合适的分配,就可以实现想要的页面布局

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>栅格系统</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-3" style="background: blue">1</div>
                <div class="col-md-6" style="background: red">1</div>
                <div class="col-md-3" style="background: blue">1</div>
            </div>
        </div>
        <script src="js/jquery-3.4.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
    
    </html>
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    计算机编程基础
    css3 压缩及验证工具
    BFC
    【原创】bootstrap框架的学习 第五课
    曼珠沙华
    仓央嘉措
    waiting for spring......
    一天
    21-chttp连接池该取多大
    守护线程会不会执行finally?默认情况new thread怎么样确定守护状态?
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11497034.html
Copyright © 2011-2022 走看看