bootstrap有哪些功能

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

　　Twitter Bootstrap是當(dāng)前最受歡迎的前端框架。 它使開發(fā)人員能夠快速構(gòu)建移動優(yōu)先和響應(yīng)快速的網(wǎng)站 。 Bootstrap使得可以巧妙地使用標(biāo)準(zhǔn)HTML5，CSS3和Javascript前端三重奏。 目前， 已有超過600萬個(gè)網(wǎng)站在使用它。

　　1.用薩斯代替LESS

　　到目前為止，Bootstrap一直使用LESS作為其主要CSS的前身 ，但是對于新的主要發(fā)行版，樣式規(guī)則將被重構(gòu)為Sass，它在前端開發(fā)人員中更受歡迎，具有龐大的貢獻(xiàn)者基礎(chǔ)，通常更易于使用并提供更多功能?？赡苄?。 多虧了用C / C ++ Bootstrap 4編寫的功能強(qiáng)大的Libsass Sass編譯器 ， 編譯速度比以前快得多 。

　　 2.用于較小屏幕的新網(wǎng)格層

　　Bootstrap具有完善的響應(yīng)式網(wǎng)格系統(tǒng)，使開發(fā)人員可以使用不同視口定位設(shè)備。 Bootstrap 3當(dāng)前對列有4個(gè)網(wǎng)格類。 col-xs-XX（用于手機(jī)）。 col-sm-XX平板電腦。 col-md-XX（用于臺式機(jī)），以及。 col-lg-XX適用于大型臺式機(jī)。 Bootstrap 4將通過第五個(gè)網(wǎng)格增強(qiáng)網(wǎng)格系統(tǒng)，這將有助于開發(fā)人員針對480px視口寬度以下的較小設(shè)備進(jìn)行定位 。

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

　　3.引入相對CSS單位

　　Bootstrap 4最終放棄了對Internet Explorer 8的支持。這確實(shí)是一個(gè)明智的步驟，因?yàn)樗试S他們擺脫討厭的polyfills并轉(zhuǎn)換為相對的CSS單元 。 新的主要版本將使用REM和EM代替像素，從而使在Bootstrap站點(diǎn)上實(shí)現(xiàn)響應(yīng)式排版成為可能。 這還將提高可讀性，并使殘障用戶可以更輕松地訪問網(wǎng)站。

　   4.全新的引導(dǎo)卡

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

　　由于卡片將比當(dāng)前的UI組件更加靈活，因此它們將為創(chuàng)意實(shí)現(xiàn)留出更大的空間。 有一些先驅(qū)者已經(jīng)使用Bootstrap卡在Codepen上進(jìn)行了實(shí)驗(yàn) 。 您可以簽出它們，也可以創(chuàng)建自己的卡。

　　 5.新的重啟模塊

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

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

　　 6.選擇加入Flexbox支持

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

　　Flexbox具有易于使用的布局，可以很好地用于響應(yīng)式設(shè)計(jì)中，因?yàn)樗峁┝艘粋€(gè)靈活的容器，可以自行擴(kuò)展或收縮以最佳方式填充可用空間。 僅使用選擇在Flexbox的功能，如果你不需要為IE9提供支持做 。

　　7.簡化的變量自定義

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

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

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

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

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

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

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

　　10.重構(gòu)JavaScript插件

　　開發(fā)團(tuán)隊(duì)使用EcmaScript 6重構(gòu)了每個(gè)新版本JavaScript插件。 通過智能利用最新的規(guī)范和最新的增強(qiáng)功能，他們打算改善前端體驗(yàn)。

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

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