bootstrap適配移動端，bootstrap適配

bootstrap適配移動端，bootstrap適配

上次在pythonanywhere上掛上去的頁面，是這個樣子的

而在手機上看是這個樣子的

總之簡直不能看= =

看了一下學校幾個公眾號的頁面，都是用的bootstrap，好吧我也去試試看好了。
在bootsrtap首頁找到一個叫bootstrap表單構造器的玩意兒，好像可以拿來用用。。

於是在深夜我搭了一個這樣的玩意兒

好吧確實比我寫的好看多了不過看起來怎麼這麼詭異呢。而且並不像能適配移動端的樣子。
想了很久決定把頁面拆開來，第一頁放兩個按鈕作為入口，其他的操作放在二級頁面分開來弄應該會好一些。
首先弄了兩個按鈕，在button外面加上a標籤，結果發現按下去不能跳轉，後來把外面的form刪掉了就好了，ummmm

在電腦上改變瀏覽器的大小看上去沒什麼問題，但是手機開啟之後還是
太 小 了。
百度了半天終於找到解決辦法

在行動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！就是在head標籤裡加上這麼一段，就好了

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">