當(dāng)前位置：首頁 > 运维知识 > windows >内容正文

windows

bootstrap网格系统_如何使用Bootstrap网格系统？

發(fā)布時間：2023/12/1 windows 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap网格系统_如何使用Bootstrap网格系统？小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

bootstrap網(wǎng)格系統(tǒng)

In the last article, we learned how to create a simple page of Bootstrap? Now, we will learn what is "Grid System" in Bootstrap and how we can use or implement it in our bootstrap page? As you know bootstrap is a mobile-friendly framework. So, we design our responsive page for 'mobile first fluid grid system' and it automatically, adjust its view in every system. Now, we move further and know more about this. If you have any doubt, ask in the comment section.

在上一篇文章中，我們學(xué)習(xí)了如何創(chuàng)建Bootstrap的簡單頁面？現(xiàn)在，我們將學(xué)習(xí)Bootstrap中的“網(wǎng)格系統(tǒng)”以及如何在Bootstrap頁面中使用或?qū)崿F(xiàn)它？如您所知，bootstrap是一個對移動設(shè)備友好的框架。因此，我們?yōu)椤耙苿觾?yōu)先流體網(wǎng)格系統(tǒng)”設(shè)計了響應(yīng)頁面，并自動在每個系統(tǒng)中調(diào)整其視圖。現(xiàn)在，我們將進(jìn)一步了解這一點(diǎn)。如有任何疑問，請在評論部分提出。

Now, first we will see what is Grid?

現(xiàn)在，首先我們將看到什么是網(wǎng)格？

A grid is a 2-D structure where rows and columns are used to structure the content. It is widely used to create a structure and for layout use HTML and CSS which make it easy to use, scan and to reduce the comprehension load on users.

網(wǎng)格是一種二維結(jié)構(gòu)，其中使用行和列來構(gòu)造內(nèi)容。它被廣泛用于創(chuàng)建結(jié)構(gòu)并使用HTML和CSS進(jìn)行布局，從而使其易于使用，掃描并減少用戶的理解負(fù)擔(dān)。

網(wǎng)格系統(tǒng) (Grid System)

In Bootstrap Grid System it scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout. Basically, Grid systems are used for creating page layouts through a series of rows and columns. It’s up to you how many columns individually you want to use in your page and how many columns group you want.

在Bootstrap Grid System中，隨著設(shè)備或視口大小的增加，它最多可擴(kuò)展至 12列。它包括預(yù)定義的類，以簡化布局。基本上，網(wǎng)格系統(tǒng)用于通過一系列行和列來創(chuàng)建頁面布局。由您決定要在頁面中分別使用多少列以及要多少列組。

Example:

例：

網(wǎng)格系統(tǒng)的工作 (Working of Grid System)

We use .container class (for fixed width) and .container-fluid class (for full width: 100%) to place the rows.
我們使用.container類(用于固定寬度)和.container-fluid類(用于全寬度：100％)放置行。
There are .row and col-*-* pre-defined classes are available for layout. It will automatically set the width from the small breakpoint.
有.row和col-*-*個預(yù)定義的類可用于布局。它將自動從小斷點(diǎn)開始設(shè)置寬度。

Note: Here, Astric ( * ) is for xs (for extra small device phone, <576px) , sm (for small device tablet, >= 768px), md (for desktop, >= 992px) , lg (for larger desktops, >= 1200px) and for the number of columns you want like: col-sm-4.
注意：此處，Astric( * )用于xs (對于超小型設(shè)備電話，<576px)， sm (對于小型設(shè)備平板電腦，> = 768px)， md (對于臺式機(jī)，> = 992px)， lg (對于大型臺式機(jī)， > = 1200px)，并指定所需的列數(shù)： col-sm-4 。
Use row for a group of columns because .row is a pre-defined wrapper class for col-*-*.
將row用于一組列，因為.row是col-*-*的預(yù)定義包裝器類。
Each .row and .col-*-* has horizontal padding for controlling the space between them called Gutters. That padding is offset in rows for the first and the last column via negative margin on .rows.
每個.row和.col-*-*都有水平填充，用于控制它們之間的間隔，稱為Gutters 。該填充通過.rows上的負(fù)邊距在第一列和最后一列的行中偏移。

網(wǎng)格選項 (Grid Options)

.minHeight{min-height: 250px;}@media (min-width: 1025px){.minHeight{min-height: 90px;}} .minHeight{min-height: 250px;}@media (min-width: 1025px){.minHeight{min-height: 90px;}}

Example (Code):

示例(代碼)：

<body><div class="container"> <div class="row"><div class="col-sm-4"><h3 style="background-color:skyblue;text-align:center;">we use 4 columns in 12 columns.</h3></div><div class="col-sm-4"><h3 style="background-color:yellow;text-align:center;">we use 4 columns in 12 columns.</h3></div><div class="col-sm-4"><h3 style="background-color:pink;text-align:center;">we use 4 columns in 12 columns.</h3></div></div></div><br /><br /><div class="container"> <div class="row"><div class="col-sm-6"><h3 style="background-color:lightgreen; text-align:center;">we use 6 columns in 12 columns.</h3></div><div class="col-sm-6"><h3 style="background-color:lightgrey;text-align:center;">we use 6 columns in 12 columns.</h3></div></div></div><br /><br /><div class="container"> <div class="row"><div class="col-sm-8"><h3 style="background-color:orange;text-align:center;">we use 8 columns in 12 columns.</h3></div><div class="col-sm-4"><h3 style="background-color:blue;text-align:center;">we use 4 columns in 12 columns.</h3></div></div></div><br /><br /><div class="container"> <div class="row"><div class="col-sm-12"><h3 style="background-color:skyblue;text-align:center;">we use all the 12 columns.</h3></div></div></div><br /><br /></body>

Mobile View

流動檢視

Tablet View

平板電腦視圖

Desktop View

桌面檢視

翻譯自: https://www.includehelp.com/html/how-to-use-bootstrap-grid-system.aspx

bootstrap網(wǎng)格系統(tǒng)

總結(jié)

以上是生活随笔為你收集整理的bootstrap网格系统_如何使用Bootstrap网格系统？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。