bootstrap網格系統_如何使用Bootstrap網格系統？

bootstrap網格系統

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.

在上一篇文章中，我們學習了如何創建Bootstrap的簡單頁面 ？ 現在，我們將學習Bootstrap中的“網格系統”以及如何在Bootstrap頁面中使用或實現它 ？ 如您所知，bootstrap是一個對移動設備友好的框架。 因此，我們為“移動優先流體網格系統”設計了響應頁面，并自動在每個系統中調整其視圖。 現在，我們將進一步了解這一點。 如有任何疑問，請在評論部分提出。

Now, first we will see what is Grid?

現在，首先我們將看到什么是網格？

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.

網格是一種二維結構，其中使用行和列來構造內容。 它被廣泛用于創建結構并使用HTML和CSS進行布局，從而使其易于使用，掃描并減少用戶的理解負擔。

網格系統 (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中 ，隨著設備或視口大小的增加，它最多可擴展至 12列。 它包括預定義的類，以簡化布局。 基本上，網格系統用于通過一系列行和列來創建頁面布局。 由您決定要在頁面中分別使用多少列以及要多少列組。

Example:

例：

Grid System in Bootstrap

網格系統的工作 (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-*-*個預定義的類可用于布局。 它將自動從小斷點開始設置寬度。

    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 (對于超小型設備電話，<576px)， sm (對于小型設備平板電腦，> = 768px)， md (對于臺式機，> = 992px)， lg (對于大型臺式機， > = 1200px)，并指定所需的列數： col-sm-4 。

  • Use row for a group of columns because .row is a pre-defined wrapper class for col-*-*.

    將row用于一組列，因為.row是col-*-*的預定義包裝器類。

  • 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上的負邊距在第一列和最后一列的行中偏移。

網格選項 (Grid Options)

Grid Options in Bootstrap

Example (Code):

示例(代碼)： 

<body>
<!---------- First type of grid ---------->
<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 />
<!----------- Second grid type --------------->
<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 />
<!----------- Third grid type --------------->
<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 />
<!----------- Fourth grid type --------------->
<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

流動檢視

Mobile view in Bootstrap


Tablet View

平板電腦視圖

Tablet view in Bootstrap


Desktop View

桌面檢視

Desktop view in Bootstrap


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

bootstrap網格系統

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/377883.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/377883.shtml
英文地址，請注明出處：http://en.pswp.cn/news/377883.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

有關WriteableBitmap和BitmapImage之間的相互轉換

有關WriteableBitmap和BitmapImage之間的相互轉換

對于WP7中圖形處理有關WriteableBitmap和BitmapImage之間的相互轉換&#xff0c;給大家幾個簡單實用的方法。一、WriteableBitmap轉為BitmapImage對象var bi new BitmapImage(); bi.SetSource(wb.ToImage().ToStream()); //其中wb是WriteableBitmap對象。 二、BitmapImage轉為…
閱讀更多...
回溯法初步

回溯法初步

本文為參考公眾號所做的筆記。 代碼隨想錄原文 回溯法本質是窮舉&#xff0c;窮舉所有可能&#xff0c;然后選出我們想要的答案&#xff0c;所以它并不是一個高效的算法。但是由于有些問題本身能用暴力搜出來就不錯了&#xff0c;所以回溯法也有很多的應用。 回溯法解決的問題…
閱讀更多...
QEMU中smp,socket,cores,threads幾個參數的理解

QEMU中smp,socket,cores,threads幾個參數的理解

在用QEMU創建KVM guest的時候&#xff0c;為了指定guest cpu資源&#xff0c;用到了-smp, -sockets, -cores, -threads幾個參數&#xff0c; #/usr/bin/qemu-system-x86_64 -name pqsfc085 -enable-kvm -m 2048 -smp 2,sockets2,cores1,threads1 \ -boot ordernc,onced \ -hda …
閱讀更多...
二、文檔掃描OCR

二、文檔掃描OCR

一、思路分析 首先&#xff0c;拿到一張文檔&#xff0c;我們需要對文檔進行預處理操作&#xff0c;再進行輪廓檢測&#xff0c;因為就算拿到文檔輪廓&#xff0c;但是這些輪廓也有可能是歪歪扭扭的&#xff0c;這時候需要通過一系列的透視變換操作&#xff0c;將文檔擺正。通…
閱讀更多...
ruby hash方法_Ruby中帶有示例的Hash.select方法

ruby hash方法_Ruby中帶有示例的Hash.select方法

ruby hash方法哈希選擇方法 (Hash.select Method) In this article, we will study about Hash.select Method. The working of this method can be predicted with the help of its name but it is not as simple as it seems. Well, we will understand this method with the…
閱讀更多...
leetcode 77. 組合 思考分析

leetcode 77. 組合 思考分析

目錄1、題目2、回溯法思路3、參考其他思路&#xff0c;更深入了解這個問題4、剪枝優化可能需要回顧到的知識文章&#xff1a;1、常用算法總結(窮舉法、貪心算法、遞歸與分治算法、回溯算法、數值概率算法)2、回溯法初步刪除vector容器中的對象元素的三種方法:pop_back, erase與…
閱讀更多...
ASP 調用dll（VB）及封裝dll實例

ASP 調用dll（VB）及封裝dll實例

ASP調用dll及封裝dll實例&#xff0c;封裝為dll可以提供運行效率&#xff0c;加密代碼。 打開VB6&#xff0c;新建ActiveX DLL 2、在工程引用中加入Microsoft Active Server Pages Object Library選擇 3、填加代碼如下Code Start 聲明部分 Private MyScriptingContext As Scrip…
閱讀更多...
三、全景拼接

三、全景拼接

一、項目所涉及到的一些知識點 Ⅰ&#xff0c;BF(Brute-Force)暴力匹配&#xff1a;把兩張圖像的特征點全部給算出來&#xff0c;然后使用歸一化的歐氏距離比較這兩張圖像上特征點之間的大小關系&#xff0c;越小越相似。 SIFT算法 import cv2 import numpy as np import ma…
閱讀更多...
找回自建SVN密碼

找回自建SVN密碼

自建了一個SVN Repo自己用。重裝系統之后密碼忘了。 經過了漫長的Google過程&#xff0c;才知道Repo中的密碼居然是明文保存的。 在yourRepoDir/conf/svnserve.conf下的password-db處設置&#xff0c;通常是yourRepoDir/conf/passwd文件。 打開passwd文件&#xff0c;就是明文保…
閱讀更多...
ruby hash方法_Ruby中帶有示例的Hash.invert方法

ruby hash方法_Ruby中帶有示例的Hash.invert方法

ruby hash方法Hash.invert方法 (Hash.invert Method) In this article, we will study about Hash.invert Method. The working of this method can be predicted with the help of its name but it is not as simple as it seems. Well, we will understand this method with …
閱讀更多...
leetcode 216. 組合總和 III 思考分析

leetcode 216. 組合總和 III 思考分析

可能需要回顧的文章; leetcode 77. 組合 思考分析 1、題目 找出所有相加之和為 n 的 k 個數的組合。組合中只允許含有 1 - 9 的正整數&#xff0c;并且每種組合中不存在重復的數字。 說明&#xff1a; 所有數字都是正整數。 解集不能包含重復的組合。 2、遞歸 這一題和之前…
閱讀更多...
【Unity】Update()和FixedUpdate()

【Unity】Update()和FixedUpdate()

Update()每幀調用&#xff0c;FixedUpdate&#xff08;&#xff09;以指定頻率被調用。可以在 Edit -> project settings -> Time -> Fixed Timestep 中設定該頻率。轉載于:https://www.cnblogs.com/xiayong123/p/3717002.html
閱讀更多...
約束執行區域（CER）

約束執行區域（CER）

受約束的執行區域 (CER) 是創作可靠托管代碼的機制的一部分。CER 定義一個區域&#xff0c;在該區域中公共語言運行庫 (CLR) 會受到約束&#xff0c;不能引發可使區域中的代碼無法完全執行的帶外異常。在該區域中&#xff0c;用戶代碼受到約束&#xff0c;不能執行會導致引發帶…
閱讀更多...
python 抓取網頁鏈接_從Python中的網頁抓取鏈接

python 抓取網頁鏈接_從Python中的網頁抓取鏈接

python 抓取網頁鏈接Prerequisite: 先決條件&#xff1a; Urllib3: It is a powerful, sanity-friendly HTTP client for Python with having many features like thread safety, client-side SSL/TSL verification, connection pooling, file uploading with multipart encod…
閱讀更多...
四、模擬英語四六級答題卡識別閱卷評分

四、模擬英語四六級答題卡識別閱卷評分

一、思路分析 首先拿到答題卡照片的時候&#xff0c;需要對照片進行一系列預處理操作&#xff0c;通過透視變換將圖像擺正方便后續的操作。每一道題五個選項&#xff0c;有五道題&#xff0c;通過字典存放準確答案。沒有依次對答題卡進行輪廓檢測&#xff0c;這里采用的是正方…
閱讀更多...
leetcode 17. 電話號碼的字母組合 思考分析

leetcode 17. 電話號碼的字母組合 思考分析

題目 給定一個僅包含數字 2-9 的字符串&#xff0c;返回所有它能表示的字母組合。 給出數字到字母的映射如下&#xff08;與電話按鍵相同&#xff09;。注意 1 不對應任何字母。 思考與遞歸程序 解空間樹的寬度是輸入數字對應的字符的個數&#xff0c;深度是輸入的數字的個數…
閱讀更多...
Blockquotes，引用，html里面，經常用到的一個！

Blockquotes，引用，html里面，經常用到的一個！

blockquote元素的使用已經非常多樣化&#xff0c;但語義上它只適用于一件事–標記了一段你的網頁被引用從另一來源。這意味著&#xff0c;如果你想讓那些花俏的引文&#xff0c;<blockquote>是不是你應該使用元素。讓我們看一看如何你應該使用此元素&#xff1a; <art…
閱讀更多...
仔細分析了下這7行，貌似時間復雜度，空間復雜度都不大，為嘛就是執行效率這么低？...

仔細分析了下這7行，貌似時間復雜度，空間復雜度都不大，為嘛就是執行效率這么低？...

for(Girl girl Girls.first(); !myGirlFriend.like(me); girl Girls.next()){if(!girl.hasBoyFriend(now) && i.like(girl)) { GirlFriend myGirlFriend (GirlFriend)girl; }} 轉載于:https://www.cnblogs.com/naran/archive/2011/12/28/2305467.html…
閱讀更多...
BHMS的完整形式是什么？

BHMS的完整形式是什么？

BHMS&#xff1a;順勢療法醫學和外科學士 (BHMS: Bachelor of Homeopathic Medicine and Surgery) BHMS is an abbreviation of Bachelor of Homeopathic Medicine and Surgery. It is a medical degree program for under graduation in Homeopathy; an alternative move towa…
閱讀更多...
c++編程思想2 --友元存儲控制

c++編程思想2 --友元存儲控制

友元friend在c中的應用 我們知道在c的類訪問權限中,private和 protected在類外面進行訪問的時候 會因為權限而不能訪問 &#xff0c;友元就解決了這個問題 。 可以這樣理解&#xff0c;他為外部的 函數 或者類 進行了 訪問授權,其實這已經超出OOP的范疇,但是對于C而言是以實用…
閱讀更多...
最新文章

Copyright @ 2022~2023