搜尋
首頁web前端Bootstrap教程bootstrap是什麼時間開源的

bootstrap是什麼時間開源的

Jul 10, 2019 pm 02:44 PM
bootstrap

Bootstrap是著名的社群網站、微博的先驅Twitter在2011年8月推出的開源WEB前端框架,集合CSS和HTML,使用了最新的瀏覽器技術,為快速WEB開發提供了一套前端工具包,包括佈局、網格、表格、按鈕、表單、導航、提示等等。使用Bootstrap可以建立出非常優雅的前端介面,而且佔用資源非常小。

bootstrap是什麼時間開源的

Bootstrap是由Twitter的Mark Otto和Jacob Thornton開發的。 (推薦學習:Bootstrap影片教學

Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。 Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

早期Twitter的前端工程師幾乎採用了任何自己熟悉的函式庫來應對前端的開發需求,這樣的造成的問題就是維護和擴展非常困難。最後Bootstrap成為應對這些挑戰的解決方案,並開始在Twitter內部迅速成長,被twitter.com廣泛採用,形成了穩定版本。隨著工程師對其不斷的開發和完善,Bootstrap進步顯著,不僅包括基本樣式,而且有了更優雅和持久的前端設計模式。

使用Bootstrap建構優雅的Web Page

Bootstrap的核心就是基於Less框架建構的CSS。所以談到Bootstrap,就必須得說說Less。

關於Less

Less是一個動態CSS語言框架,Less擴展了CSS的動態特性,相對於傳統的CSS,Less提供了更強大的功能和靈活性。基於Less,我們可以在編寫CSS時使用嵌入式申明、變數、混合模式、運算和顏色編輯功能函數等。簡單來說就是Less可以讓你像程式設計一樣寫CSS,把程式儲存在後綴為less的檔案中,Less提供了框架將其編譯為標準的css檔。

舉個簡單的例子,如果你想為多個樣式設定同一個顏色,可以這樣寫:

@color: #FFFFFF;
h1 {
color: @color;
} 
#sub{
color: @color;
}    
#编译后
h1 {
  color: #ffffff;
}
#sub {
  color: #ffffff;
}

以上程式碼只是Less的最簡應用。除了變量,還可以在CSS進行數學運算、傳參、文件相互引用、規則嵌套等等。可以想像,這種寫CSS的方式會為前端開發帶來多大的改變。無論是從靈活性、擴展性和可維護性上,Less都讓CSS開發有了大幅提升,動態性增強了。

更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!

以上是bootstrap是什麼時間開源的的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
引導程序:從佈局到組件引導程序:從佈局到組件Apr 23, 2025 am 12:06 AM

Bootstrap是一個由Twitter開發的前端框架,集成了HTML、CSS和JavaScript,幫助開發者快速構建響應式網站。其核心功能包括:柵格系統與佈局:基於12列的設計,使用flexbox佈局,支持不同設備尺寸的響應式頁面。組件與樣式:提供豐富的組件庫,如按鈕、模態框等,通過添加類名即可實現美觀效果。工作原理:依賴CSS和JavaScript,CSS使用LESS或SASS預處理器,JavaScript依賴jQuery,實現交互和動態效果。通過這些功能,Bootstrap大大提升了開發

什麼是bootstrap?初學者的介紹什麼是bootstrap?初學者的介紹Apr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified:一個簡單的解釋Bootstrap Demystified:一個簡單的解釋Apr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop

引導與反應:選擇正確的方法引導與反應:選擇正確的方法Apr 20, 2025 am 12:09 AM

Bootstrap適合快速搭建和小型項目,而React適合複雜的、交互性強的應用。 1)Bootstrap提供預定義的CSS和JavaScript組件,簡化響應式界面開發。 2)React通過組件化開發和虛擬DOM,提升性能和交互性。

Bootstrap的目的:建立一致且有吸引力的網站Bootstrap的目的:建立一致且有吸引力的網站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是幫助開發者快速構建響應式、移動優先的網站。其核心功能包括:1.響應式設計,通過網格系統實現不同設備的佈局調整;2.預定義組件,如導航欄和模態框,確保美觀和跨瀏覽器兼容性;3.支持自定義和擴展,使用Sass變量和mixins調整樣式。

Bootstrap與其他框架:比較概述Bootstrap與其他框架:比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma,因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發,但自定義樣式可能較複雜。

在React中集成引導樣式:方法和技術在React中集成引導樣式:方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法:1)使用CDN引入,適合小型項目或快速原型設計;2)使用npm包管理器安裝,適用於需要深度定制的場景。通過這些方法,你可以在React中快速構建美觀且響應式的用戶界面。

React的引導:優勢和最佳實踐React的引導:優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括:1)快速開發,2)一致性和可維護性,3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫,可以在React項目中高效使用Bootstrap的組件和样式。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具