響應式網站製作之Bootstrap框架的使用

2021-01-08 天隆網絡

在響應式網站中使用bootstrap的使用率是極大的,很多開發者都在使用它。那boosttrap的優勢是什麼了?在boosttrap出現前有很多網站的頁面排版命名重複、複雜、無意義,樣式重複、冗餘、不規範、不和諧,頁面錯亂、不規範、不和諧,而boosttrap出現後各種命名都統一併且規範化,頁面風格統一,畫面和諧。Bootstrap的核心是柵格系統,Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統,隨著屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類。排列如圖:

柵格參數如圖:

柵格系統是通過一系列的行(row)與列(column)的組合來組建頁面布局的,Bootstrap 需要為頁面內容和柵格系統包裹一個.container容器。Bootstrap提供了兩個容器類(.container和.container-fluid),而這兩種容器類不能互相嵌套。如圖:

當屏幕寬度大於和等於1200px時.Bootstrap使用.col-lg-的類來組建頁面布局,當屏幕寬度大於和等於992px時.Bootstrap使用.col-md-的類來組建頁面布局,當屏幕寬度大於和等於768px時.Bootstrap使用.col-sm-的類來組建頁面布局,當屏幕寬度小於768px時.Bootstrap使用.col-sm-的類來組建頁面布局,通過這些響應式的類Bootstrap組建了一個在多種屏幕設備上的響應式網站。

相關焦點

  • 用 Bootstrap4 製作響應式網頁一(安裝框架)
    bootstrap 是全球最受歡迎的前端開源工具庫,它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 javascript 插件。基於 Bootstrap 提供的強大功能,能夠讓你快速設計並自定義你的網站。截止本文,Bootstrap 最新版本 V4.5.0。本文將以教程文檔的方式演示一下如何用 Bootstrap 前端框架製作響應式網頁(適用pc、平板、手機一體式訪問)。
  • 前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架,沒有之一,當前的最新版本是bootstrap4.4.1,和之前的3.X版本相比較有較大的變化,不過都是屬於各種標籤的分離,方法還是一樣的,在網上各種教程雖多,但是對於入門還不是不夠,很多入門教程講得雲裡霧裡,看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。
  • bootstrap響應式布局
    什麼是響應式 Web 設計   響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如,您先在計算機顯示器上瀏覽一個網站,然後在智慧型手機上瀏覽,智慧型手機的屏幕尺寸遠小於計算機顯示器,但是你卻沒有感覺到任何差別,兩者的用戶體驗幾乎一樣,這說明這個網站在響應式設計方面做得很好。
  • Bootstrap Studio Mac(網站設計製作工具)
    Mac哪款網站設計製作工具好用呢?Bootstrap Studio for Mac是一款網站設計製作工具,它帶有大量內置組件,您可以拖放以組裝響應式網頁,功能實用!使用Bootstrap Studio Mac版,幫助你快速地創建一個外觀漂亮且運行良好的網站。
  • 推薦10 款基於 Bootstrap 框架的擴展
    它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。本文推薦 10 款基於 Bootstrap 框架的擴展,包括風格擴展以及功能方面的擴展:1.
  • bootstrap容器container響應式布局,各種使用方法詳解
    container是bootstrap頂層布局容器,這是一個必須使用的標籤,在每一個頁面上都會用到,是實現響應式布局的核心組成部分,在bootstrap4.4和老舊版本上有著細微的差異,在4.4.1版本中進行了升級,使得container標籤更加靈活方便。
  • 前端框架bootstrap和layui有什麼區別
    Twitter公司維護的框架,很多做前端的最愛,尤其是響應式網站,第一個想到的框架就是Bootstrap,Bootstrap的柵格系統很經典,我們團隊目前用的框架也是借鑑了Bootstrap的思想。再來看看Layui官方的定義layui 是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。
  • 如何使用框架Bootstrap 4框架來實現易於查看的UI
    一個框架,可以輕鬆查看易於閱讀的設計BootstrapBootstrap(bootstrap)是 一個有用的框架,可以輕鬆地在自己的網頁上準備易於使用且易於使用的設計和功能。如下所示,您可以使用導航欄,側欄,菜單項,按鈕類型連結,列布局等輕鬆地為PC和行動裝置創建頁面。
  • Bootstrap4.4.1網格實現響應式布局,只需要掌握這一點就行
    實現前端網頁實現響應式布局如果是自己寫代碼來實現真的挺困難的,但是使用bootstrap框架就非常容易了,即使不懂前端開發也可以很好地駕馭。當前最新版本是bootstrap4.4.1,和之前的老舊版本相比較在細節方面做了很多的優化和升級,其中網格系統是實現網頁響應式的核心組成部分。
  • Twitter BootStrap:前端框架利器
    Bootstrap的歷史為了應對複雜的需求,早期的Twitter前端工程師在開發網站時幾乎採用了所有自己熟悉的前端庫。造成了網站維護困難、擴展性不強、開發成本高等問題。此時BootStrap被提上了日程。Twitter要求前端工程師完全依靠這一單一框架進行前端開發。
  • 天企網絡:網站建設知識之響應式網站前端設計
    一段時間之前我對響應式的概念還是Bootstrap、Amaze之類的框架組件,用過幾次也不以為然,我想國內搜尋引擎在提供移動搜索結果頁時還是會給移動網站加分的,卻不能像google一樣識別響應式網站,可能還需要一段時間發展。
  • 17 款常用響應式 web UI 框架
    官方網站: http://twitter.github.com/bootstrap/ github: https://github.com/twitter/bootstrap Gridpak Gridpak 的目的是實現了響應式的 Web 頁面設計,提高您的工作流程,節省了時間。通過生成PNG圖像,CSS和JavaScript,,讓 Gridpak 創建響應式的簡單界面。Gridpak 產生的CSS 兼容 IE 8+,但它使用很多實驗性的CSS屬性,如媒體查詢,盒大小和背景剪輯屬性,所以我們建議您結合 Modernizer 來使用,確保向後兼容性。
  • bootstrap前端開發框架到底應該怎麼用?從整體看bootstrap
    做一個網站,要先有前端才有後端。對於很多個人開發者來說,前後端都要自己寫,就需要有一個高效率的開發框架,說白了就是怎麼省事、省力,就怎麼辦。想要快速開發出前臺的靜態頁面,bootstrap是很好的選擇,它是主流的前端開發框架,能夠快速構架前端頁面,如果你理解了它的架構,開發一個靜態的博客首頁,兩個小時就能搞定。好了,進入正題,說說bootstrap。
  • 我來說什麼是響應式網站?儘量通俗
    響應式網站的完整說法叫做 「響應式網站設」翻譯至 「Responsive Web design」。此概念與2010年5月由國外著名網頁設計師Ethan Marcotte所提出的,而他的靈感又主要來自於 響應式建築設計的概念,這個大家可能不太深刻,比如已經有公司在生產"智能玻璃":當室內人數達到一定的閾值時,這種玻璃可以自動變為不透明,確保隱私,這就是響應式建築設計的概念。
  • 大神帶你了解Bootstrap框架技術!
    進入 Bootstrap 的網站(getbootstrap.com/),我們可以看到這樣一句話:Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • 響應式布局 bootstrap案例
    傳統的開發方式是PC端開發一套,手機端再開發一套,而使用響應式布局只要開發一套就夠,缺點就是CSS比較重。如果pc端和移動端內容非常多的話,還是強烈建議pc和移動端各開發一套,這樣後期維護起來更加方便。
  • 入門bootstrap,簡潔清新的前端框架
    最近 寫項目用到bootstrap確實使用起來很方便,而且風格簡潔,很適合自己做項目時用來當作前端框架。下面是bootstrap介紹:2011年,twitter的「一小撮」工程師為了提高他們內部的分析和管理能力,用業餘時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。
  • 免費的Bootstrap網站模版 - Bootstrapper
    免費的Bootstrap網站模版 - Bootstrapper 相信對於前端開發人員來說Bootstrap一定不陌生,它能夠幫助我們創建優雅而功能強大的模板和頁面。
  • 從Bootstrap小白的角度,為Bootstrap初學者的學習建議與感悟
    包括各種各樣的網頁設計方法,包括幽靈按鈕、更強調字體、視頻背景、卡片式設計、扁平化以及響應式設計,為了更加便於開發前端頁面,前端框架應運而生,其中Bootstrap是最有名的一個。 一開始學習這個框架的時候,說實話(誰還不是一個菜鳥)。開始接觸這個布局框架的時候就是感覺到無力。學過框架的人都說簡單,覺得肯定是騙人的。你看首先要用這個框架必須搭建環境,這就難倒很多人。
  • 網站設計製作工具
    Bootstrap Studio for Mac是一款網站設計製作工具,它帶有大量內置組件,您可以拖放以組裝響應式網頁,功能強大!使用Bootstrap Studio Mac版,幫助你快速地創建一個外觀漂亮且運行良好的網站。