1. 程式人生 > >Bootstrap3.3.7全面解讀和Bootstrap4.0變化分析----------004(4.0變化分析)

Bootstrap3.3.7全面解讀和Bootstrap4.0變化分析----------004(4.0變化分析)

我們分析的是2017年3月13日Bootstrap4.0-alpha.6這個版本,先來說說4.0的一些變化,然後開始慢慢看原始碼究竟怎麼寫的。我所有寫的內容都是根據這一個版本的原始碼寫出的,如果後續版本更新出現新的用法,在來糾正。

變化:不在支援IE9以及以下的瀏覽器。它的原始碼是採用 Sass 語言編寫的,也就是說sass全面取代了less,這也是我第一節說看好sass的原因。程式碼使用flexbox的佈局方式。原始碼中全部使用了rem為單位(除了部分的margin和padding使用px),並結合百分比的寫入方式。使得對於移動端,支援更加充分。柵格系統 ( Grid System ) 升級,更好地適配移動端。card元件,reboot模組,增強了定製化。新增媒體查詢最小零界點 576px,更改了很多class樣式的寫法,如圖:


如圖:class命名不同了


以上就是4.0的變化。其實你知道了變化是那些,在使用的過程中注意到就是,還是那麼一句話,多用就熟練了。對於它的新特性,其實用的意義還不是很大,因為它對瀏覽器的要求更高了,在實際的專案中,還不可能大規模的使用。後續我會專門寫一篇關於4.0所有程式碼一行一行的分析。今天先寫到這裡吧。

相關推薦

Bootstrap3.3.7全面解讀Bootstrap4.0變化分析----------0044.0變化分析

我們分析的是2017年3月13日Bootstrap4.0-alpha.6這個版本,先來說說4.0的一些變化,然後開始慢慢看原始碼究竟怎麼寫的。我所有寫的內容都是根據這一個版本的原始碼寫出的,如果後續版

IE11 瀏覽器 無法相容 Bootstrap3.3.7 的進度條progress

IE11 瀏覽器 無法相容 Bootstrap3.3.7 的進度條progress 原因:需要在<head>里加入   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 這個才可以。 不

Bootstrap3.3.7導航欄下拉選單滑鼠滑過展開

$(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); });

Centos 7.0 編譯安裝LAMPLinxu+apache+mysql+php之源碼安裝Apache

mysql apache mysql編譯安裝 apache編譯安裝 lamp編譯安裝 Apache 簡介: Apache是世界使用排名第一的Web服務器軟件。它可以運行在幾乎所有廣泛使用的計算機平臺上,由於其跨平臺和安全性被廣泛使用,是最流行的Web服務器端軟件之一。它快速、可靠

Centos 7.0 編譯安裝LAMPLinxu+apache+mysql+php之源碼安裝Mysql

php mysql apache mysql 簡介: MySQL是一個關系型數據庫管理系統,關系數據庫將數據保存在不同的表中,這樣就增加了速度並提高了靈活性。目前其屬於 Oracle 旗下產品。MySQL 是最流行的關系型數據庫管理系統之一,在 WEB 應用方面,MySQL是最好的 RD

Centos 7.0 編譯安裝LAMPLinxu+apache+mysql+php之源碼安裝php

lamp apache 源碼編譯lamp php mysql centos 7 編譯安裝lamp PHP簡介: PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本預處理器”)是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特

2018 - Python 3.7 爬蟲之 Scrapy 框架的安裝及配置

一,安裝 Python3.7 二,安裝 pip 三,安裝 pywin32 四,安裝 pyOpenSSL 五,安裝 lxml 六,安裝 zope.interface 七,安裝 twisted 八,安裝 Scrapy 九,一鍵升級所有庫,Python 3.7親測可用,建立

MongoDB走過的坑4.0.3版本

資料儲存一般使用本地或者儲存在資料庫,MongoDB是一個非關係型資料庫,今天小結下走過的一些坑。 1、網上的很多教程對自己無效 解決方法:這種情況一般都是和版本有關係,資料庫在不斷的更新發展,很多東西可能發生變化,建議找教程的時候按照特定的版本進行查詢,否則很容易就入坑了 2、以前安裝過的MongoD

通過實際部署應用程式來學習Web 3.0:動手實踐IPFS +以太坊

“分散式網路”或“Web 3.0”現因其將給當今行業帶來的革命性變革已儼然成為流行語。但是我們中有多少人真正瞭解Web 3.0呢? 在本文中,我會對Web 3.0的顯著特點進行介紹。在獲得對Web 3.0的基本瞭解之後,我們將一起在IPFS上部署應用程式。該應用程式具有一份Solidit

linux環境下centos 7安裝redis4.0.11版本

以下是我安裝redis的筆記: 首先進入到linux環境需要安裝redis的目錄,我的是/etc/local/hxq 然後 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 解壓到當前目錄:tar -z

【OAuth2.0網頁授權】根據access_tokenopenId獲取使用者基本資訊Senparc.Weixin.MP.dll

寫在回撥的URL頁面裡,access_token和openId根據code獲取 OAuthUserInfo userInfo = OAuthApi.GetUserInfo(a

OpenCV3.3.0 + CLion + CMake 配置Mac鉅細無敵版

文章目錄開始完成了常見問題 參考連結: 1,cmake編譯 http://blog.csdn.net/baidu_36316735/article/details/53168438 2,CLion匯入opencv http://blog.csdn.net/xia

【親測有效】Android Studio 3.0.1中對ButterKnife8.4.0建立依賴

備註:連線網路狀態下build...在Project:build.gradle下新增classpathclasspath 'com.jakewharton:butterknife-gradle-plugin:8.4.0'同上,在Module:build.gradle中新增ap

03、手工創建Asp.Net Core 2.0 web應用程序探索最小架構

log bho 啟動 oid img gif method nuget ica 03、手工創建Asp.Net Core 2.0 web應用程序(探索最小架構) 一、創建一個幹凈的控制臺程序 這裏我們使用的開發工具是VS2017 項目只有一個Program.cs類。

vue2.0 配置環境總結都是淚啊

fan all oba 都是 cnpm 2.0 git lex tex   最近有點空閑時間,終於把一直想學的vue提上了日程,以下是收集的一些幫助入門的鏈接   1:https://vuefe.cn/v2/guide/  vue2.0中文官網   2:https://ro

Excel的下載讀取,部分代碼大神請路過

ans 功能實現 lena 瀏覽器 catch 完成後 spl dex AC A.下載Excel表或其他文件(運用瀏覽器自帶的功能實現下載) a) 前臺頁面: <a href="/SolidTransfers/DownloadFile" class="

mysql 5.7 基於GTID 主從同步的1236故障處理其它事務故障等同

其它 top 處理 set tid gtid stop eve 1-1 登錄從庫 stop slave; 查看執行事務 show slave status\G Retrieved_Gtid_Set: ee3bdb44-f6a1-11e7-b194-005056a35fd4

K均值聚類K-means高斯混合聚類Mixture of Gaussian Models

math del 一個 ans line k-均值聚類 初始化 gaussian 樣本 K-means算法流程 給定條件: ????example set: \((x_1, y_1), (x_2, y_2), \dots, (x_N, y_N)\) 初始化: ????K個簇

ftp安裝虛擬用戶創建終於搞清楚了

sftp att word 很多 刪除 用戶創建 手動 人員 require 之前領導叫我在Linux下搭建一個FTP服務器,搞一個公司內部人員文件結構,並對相應人員設置相應的訪問權限,之前網上有很多安裝方法,但是都是很傻瓜式地安裝,用戶簡單地創建,而我當時也是用的最笨的方