bootstrap的栅格系统和响应式工具
關于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-*不存在， 也影響大屏幕設備。
通過研究后面的實例，可以將這些原理應用到你的代碼中。
| 總是水平排列 | 開始是堆疊在一起的，當大于這些閾值時將變為水平排列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的栅格系统和响应式工具的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自己做的HTML
- 下一篇： scss的使用方式（环境搭建）