三、Semantic-UI之定義容器

時間 2019-11-21

標籤 semantic 定義容器简体版

原文原文鏈接

3.1 定義容器

在主流的前端框架中都會有容器的概念，可是在Semantic-UI中，若是要定義容器須要經過class="ui container"，定義容器後，瀏覽器會根據不一樣的像素值判斷當前網格的顯示大小。css

實例：定義容器

經過定義容器能夠發現，定義完容器的頁面兩邊會有邊距。沒有定義容器的在瀏覽器中是百分之百的顯示。html

官方文檔關於容器顯示的說明：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI</title>
    <!--使用CDN導入js和css文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
    <div class="ui container">
        <div class="ui grid">
            <div class="four wide column" style="background-color: #00b5ad">4格</div>
            <div class="eight wide column" style="background-color: #2bbbff">8格</div>
            <div class="four wide column" style="background-color: #5a30b5">4格</div>
        </div>
    </div>
</body>
</html>

效果圖：jquery