Python Web开发:Bootstrap栅格布局

来自CloudWiki
跳转至: 导航搜索

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统。

Bootstrap提供了4种分辨率规模,分别是col-xs、col-sm、col-md 、col-lg .

例:col-md-6 :中等页面时 占6个格子,col-lg:大型界面时占6个格子。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap简单示例</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">
    </script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="alert alert-success col-md-6 col-xs-12" role="alert">
        Python Web实战
    </div>
    <div class="alert alert-info col-md-6 col-xs-12" role="alert">
        Python Web实战
    </div>
</body>

</html>