關于bootstrap的響應式布局，昨天看了楊老師的視頻教學https://www.bilibili.com/video/av18357039豁然開朗，在這里記錄一下

一：meta標簽的引用

<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">

其實自己一直沒有注意到，關于這個meta標簽的引入，如果不引入這些標簽，就無法實現響應式布局。

二：響應式按鈕

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_content" aria-expanded="false"> 　　<span class="sr-only">Toggle navigation</span> 　　<span class="icon-bar"></span> 　　<span class="icon-bar"></span> 　　<span class="icon-bar"></span>
</button>

這個響應式按鈕默認是不顯示的，只有屏幕寬度<768(屬于xs列)時，就會顯示，比如在電腦上瀏覽是看不到的，在手機上就可以看到，這也是我之前一直想了解的東西

關于這個按鈕，首先要引入的幾個參數：

class="navbar-toggle collapsed" data-toggle="collapse"：按鈕實現toggle形式的下拉和回滾

data-target="#nav_content"：這個data-target里面的值是你想要展開的內容的div的ID

下面展示完整的例子（基于django模板）：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container-fluid">{#導航標題#}<div class="navbar-header">{# 移動端按鈕 #}<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_content" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>{# 標題內容 #}<a class="navbar-brand">SuperPigeons</a></div>{#導航內容#}<div class="navbar-collapse collapse" id="nav_content"><ul class="nav navbar-nav"><li class="{% block nav_index %}{% endblock %}"><a href="{% url 'index' %}">首頁</a></li><li><a href="">博客</a></li><li><a href="">其他</a></li></ul><ul class="nav navbar-nav navbar-right" style="margin-right: 10px">{% if user.is_authenticated %}<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user }}<span class="caret"></span></a><ul class="dropdown-menu" style="min-width:100%;"><li><a href="" style="text-align: center">用戶信息</a></li> {# <li role="separator" class="divider"></li>#}<li><a href="" style="text-align: center">退出</a></li> {# <li role="separator" class="divider"></li>#}<li><a href="" style="text-align: center">暫無</a></li></ul></li>{% else %}<li><a href="{% url 'login' %}">登陸</a></li>{% endif %}</ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">搜索</button></form></div></div> </nav>

三：柵格系統

其實這部分，我之前自學了好久，官方文檔一直也沒看的太明白，看了視頻教學后把學到的東西記錄一下

先引用官方文檔的一個簡介：

柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：

• “行（row）”必須包含在?.container?（固定寬度）或?.container-fluid?（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
• 通過“行（row）”在水平方向創建一組“列（column）”。
• 你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
• 類似?.row?和?.col-xs-4?這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
• 通過為“列（column）”設置?padding?屬性，從而創建列與列之間的間隔（gutter）。通過為?.row?元素設置負值?margin?從而抵消掉為?.container?元素設置的?padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
• 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
• 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個?.col-xs-4?來創建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
• 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何?.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何?.col-lg-*不存在， 也影響大屏幕設備。

通過研究后面的實例，可以將這些原理應用到你的代碼中。

?超小屏幕?手機 (<768px)小屏幕?平板 (≥768px)中等屏幕?桌面顯示器 (≥992px)大屏幕?大桌面顯示器 (≥1200px)柵格系統行為.container?最大寬度類前綴列（column）數最大列（column）寬槽（gutter）寬可嵌套偏移（Offsets）列排序

總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變為水平排列C
None （自動）	750px	970px	1170px
.col-xs-	.col-sm-	.col-md-	.col-lg-
12
自動	~62px	~81px	~97px
30px （每列左右均有 15px）
是
是
是

說一下我自己對柵格系統的理解，拿我自己剛剛寫好的登錄頁面舉例：

<div class="container"><div class="row"><div class="col-sm-4 col-md-offset-6"><div class="panel panel-default"><div class="panel-heading"><h4>用戶登錄</h4></div><div class="panel panel-body"><form method="post" action="{% url 'login' %}" class="form-signin">{% csrf_token %}{% for i in loginform %}{{ i }}{{ i.errors }}{% endfor %}<button class="btn btn-lg btn-primary btn-block">登錄</button>{% if message %}<p id="message">{{message}}</p>{% endif %}</form></div></div></div></div> </div>

首先定義一個容器class="container"代表定義了一個響應式的內容框，然后是class="row"代表一行，容器里的直接子元素就是行row，可以在row里定義列column

1.列元素

列元素可以定義多個col-**-**,代表在不同的設備上 此列占多少個格子，小設備優先，比如你寫col-xs-4 代表在超小屏幕上占4格，如果不寫其他的col ，在所有設備上 ，都是占4格

2.列偏移

列默認左浮動，如果需要向右偏移寫col-md-offset-6即可，代表在md中等設備970px上向右偏移6格，在大于md的都會偏移，在小于md的設備上就不會偏移

?

大屏幕lg上有偏移

?

小屏幕sm <970px 不會偏移

?

手機屏幕，居中了

?

四：響應式工具

這個響應式工具也是看了楊老師的視頻后，才知道類似于這種功能是怎么實現的，就比如在電腦上可以看到一列數據，但是在手機端，寬度比較小的設備上就自動把這一列數據屏蔽掉了，為了美觀和使用方便，我們可以通過使用bootstrap的響應式工具來實現

摘自官方文檔

?

這個圖其實表述的已經很清楚了，無論是可見visible還是隱藏hidden，都是只針對你設置的某一個設備類型生效，除此之外的，無論大于或者小于這個尺寸的，都不會生效，請注意這一點

?

這就是我暫時理解的柵格系統的一部分，后面還會記錄更多的內容

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的bootstrap的栅格系统和响应式工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。