bootstrap有哪些功能

這篇文章主要介紹“bootstrap有哪些功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“bootstrap有哪些功能”文章能幫助大家解決問題。

　　Twitter Bootstrap是當前最受歡迎的前端框架。 它使開發人員能夠快速構建移動優先和響應快速的網站 。 Bootstrap使得可以巧妙地使用標準HTML5，CSS3和Javascript前端三重奏。 目前， 已有超過600萬個網站在使用它。

　　1.用薩斯代替LESS

　　到目前為止，Bootstrap一直使用LESS作為其主要CSS的前身 ，但是對于新的主要發行版，樣式規則將被重構為Sass，它在前端開發人員中更受歡迎，具有龐大的貢獻者基礎，通常更易于使用并提供更多功能。可能性。 多虧了用C / C ++ Bootstrap 4編寫的功能強大的Libsass Sass編譯器 ， 編譯速度比以前快得多 。

　　 2.用于較小屏幕的新網格層

　　Bootstrap具有完善的響應式網格系統，使開發人員可以使用不同視口定位設備。 Bootstrap 3當前對列有4個網格類。 col-xs-XX（用于手機）。 col-sm-XX平板電腦。 col-md-XX（用于臺式機），以及。 col-lg-XX適用于大型臺式機。 Bootstrap 4將通過第五個網格增強網格系統，這將有助于開發人員針對480px視口寬度以下的較小設備進行定位 。

　　新的網格類采用了以前最小的網格名稱，并將當前網格層的名稱向上推了一個檔位。 在Bootstrap 4中，大型臺式機將使用。col-xl-XX類選擇器。 重要的是要知道，盡管使用了新名稱，但它們并未為超大屏幕添加新類，而是為超小屏幕添加了新類。

　　3.引入相對CSS單位

　　Bootstrap 4最終放棄了對Internet Explorer 8的支持。這確實是一個明智的步驟，因為它允許他們擺脫討厭的polyfills并轉換為相對的CSS單元 。 新的主要版本將使用REM和EM代替像素，從而使在Bootstrap站點上實現響應式排版成為可能。 這還將提高可讀性，并使殘障用戶可以更輕松地訪問網站。

　   4.全新的引導卡

　　開發團隊決定統一Bootstrap用戶界面的某些先前元素，因此他們決定引入一個稱為Cards的新UI組件 。 卡片將取代以前的Kong，縮略圖和面板，并為用戶提供更簡化的工作流程。 不用擔心，卡片會保留熟悉的元素，例如井的標題，頁眉和頁腳，縮略圖和面板。

　　由于卡片將比當前的UI組件更加靈活，因此它們將為創意實現留出更大的空間。 有一些先驅者已經使用Bootstrap卡在Codepen上進行了實驗 。 您可以簽出它們，也可以創建自己的卡。

　　 5.新的重啟模塊

　　新的重新啟動模塊將替換以前的normalize.css重置文件。 它不會拋棄它。 相反，它在其上建立了更多規則。 此舉的目的是將所有通用CSS選擇器和重置樣式包含在單個易于使用的SCSS文件中 。 如果您想更好地了解新模塊的工作原理，可以在這里查看源代碼。

　　很高興知道，新的重置樣式巧妙地將元素上的box-size CSS屬性設置為border-box ，因此該屬性由頁面上的每個子元素繼承。 新樣式規則使響應式布局更易于管理 。 如果您想體驗內容框和邊框框布局類型之間的差異，請看一下CSS-Tricks.com提供的這個方便的演示 （它不是為Bootstrap 4創建的，它只是說明了如何調整框大小一般有效）。

　　 6.選擇加入Flexbox支持

　　Bootstrap 4使得可以利用CSS3的Flexbox布局 ，但是-Internet Explorer 9不支持flexbox模塊-默認版本的Bootstrap 4而是使用float和display CSS屬性來實現流暢的布局 。

　　Flexbox具有易于使用的布局，可以很好地用于響應式設計中，因為它提供了一個靈活的容器，可以自行擴展或收縮以最佳方式填充可用空間。 僅使用選擇在Flexbox的功能，如果你不需要為IE9提供支持做 。

　　7.簡化的變量自定義

　　在新的Bootstrap版本中使用的所有Sass變量都包含在一個名為_variables.scss的文件中，它將大大簡化開發過程。 除了將此文件中的設置復制到另一個名為_custom.scss的文件中以更改默認值之外，您無需執行任何其他操作。

　　您可以自定義許多內容，例如顏色，間距，鏈接樣式，版式，表格，網格斷點和容器，列號和裝訂線寬度等。

　　Bootstrap 3已經具有許多實用的實用程序類，例如更改浮動類或clearfix的實用程序類，但是Bootstrap 4卻添加了更多實用程序類。 新的間距類別使開發人員可以快速更改其網站上的填充和邊距。

　　新類的語法非常簡單，例如添加。 ma-0類鏈接一個樣式規則，該規則將給定元素（margin-all-0）的所有邊距都設置為0。 邊距使用m-前綴，而填充則使用p-前綴設置樣式。 在開發文檔中，您可以查看所有新的interval實用程序類。

　　9.系繩驅動的工具提示和彈出窗口

　　在Bootstrap 4中，工具提示和彈出窗口使用了supercool Tether 庫 ，這是一個定位引擎，可以將絕對定位的元素保留在同一頁面上的另一個元素旁邊。 這意味著工具提示和彈出窗口將自動正確放置在Bootstrap 4網站上。

　　不要忘記，由于Tether是第三方JavaScript庫，因此您需要在bootstrap.js文件之前將其單獨包含在HTML中。

　　10.重構JavaScript插件

　　開發團隊使用EcmaScript 6重構了每個新版本JavaScript插件。 通過智能利用最新的規范和最新的增強功能，他們打算改善前端體驗。

　　新的Bootstrap 4還經歷了其他JavaScript改進，例如選項類型檢查 ， 通用拆卸方法和UMD支持 ，它們將一起工作，以使最受歡迎的前端框架比以往任何時候都更流暢地運行。

關于“bootstrap有哪些功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。