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

2020-12-25 天隆網絡

在響應式網站中使用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.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架,沒有之一,當前的最新版本是bootstrap4.4.1,和之前的3.X版本相比較有較大的變化,不過都是屬於各種標籤的分離,方法還是一樣的,在網上各種教程雖多,但是對於入門還不是不夠,很多入門教程講得雲裡霧裡,看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。
  • bootstrap響應式布局
    什麼是響應式 Web 設計   響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如,您先在計算機顯示器上瀏覽一個網站,然後在智慧型手機上瀏覽,智慧型手機的屏幕尺寸遠小於計算機顯示器,但是你卻沒有感覺到任何差別,兩者的用戶體驗幾乎一樣,這說明這個網站在響應式設計方面做得很好。   我們已經在我們的流動布局實例中應用了響應性能,並請您在不同的屏幕尺寸下進行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調整的擴展來調整瀏覽器。。
  • bootstrap容器container響應式布局,各種使用方法詳解
    container是bootstrap頂層布局容器,這是一個必須使用的標籤,在每一個頁面上都會用到,是實現響應式布局的核心組成部分,在bootstrap4.4和老舊版本上有著細微的差異,在4.4.1版本中進行了升級,使得container標籤更加靈活方便。
  • 推薦10 款基於 Bootstrap 框架的擴展
    它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。本文推薦 10 款基於 Bootstrap 框架的擴展,包括風格擴展以及功能方面的擴展:1.
  • 如何使用框架Bootstrap 4框架來實現易於查看的UI
    一個框架,可以輕鬆查看易於閱讀的設計BootstrapBootstrap(bootstrap)是 一個有用的框架,可以輕鬆地在自己的網頁上準備易於使用且易於使用的設計和功能。如下所示,您可以使用導航欄,側欄,菜單項,按鈕類型連結,列布局等輕鬆地為PC和行動裝置創建頁面。
  • 前端框架bootstrap和layui有什麼區別
    Twitter公司維護的框架,很多做前端的最愛,尤其是響應式網站,第一個想到的框架就是Bootstrap,Bootstrap的柵格系統很經典,我們團隊目前用的框架也是借鑑了Bootstrap的思想。2、使用範圍layui 其實更偏向與後端開發人員使用,在服務端頁面上有非常好的效果。做後臺框架。作者「閒心」都說了,開發這個框架的出發點是為了滿足服務端程式設計師的需求。
  • Bootstrap4.4.1網格實現響應式布局,只需要掌握這一點就行
    實現前端網頁實現響應式布局如果是自己寫代碼來實現真的挺困難的,但是使用bootstrap框架就非常容易了,即使不懂前端開發也可以很好地駕馭。當前最新版本是bootstrap4.4.1,和之前的老舊版本相比較在細節方面做了很多的優化和升級,其中網格系統是實現網頁響應式的核心組成部分。
  • Twitter BootStrap:前端框架利器
    Bootstrap的歷史為了應對複雜的需求,早期的Twitter前端工程師在開發網站時幾乎採用了所有自己熟悉的前端庫。造成了網站維護困難、擴展性不強、開發成本高等問題。此時BootStrap被提上了日程。Twitter要求前端工程師完全依靠這一單一框架進行前端開發。
  • 我來說什麼是響應式網站?儘量通俗
    響應式網站的完整說法叫做 「響應式網站設」翻譯至 「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,簡潔清新的前端框架
    最近 寫項目用到bootstrap確實使用起來很方便,而且風格簡潔,很適合自己做項目時用來當作前端框架。下面是bootstrap介紹:2011年,twitter的「一小撮」工程師為了提高他們內部的分析和管理能力,用業餘時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。
  • 17 款常用響應式 web UI 框架 - OSCHINA - 中文開源技術交流社區
    它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。 官方網站: http://twitter.github.com/bootstrap/ github: https://github.com/twitter/bootstrap
  • 免費的 Bootstrap 網站模版 - Bootstrapper
    作為一個成功的前端框架,擁有眾多的粉絲,因此相關的網頁設計模板也曾出不窮。 今天我們介紹一款免費的bootstrap模板 -  Bootstrapper ,這個漂亮的模板來自知名的模板市場 FlashMint,擁有HTML/CSS及其PS源文件,你可以使用到個人或者商用網站中。希望大家喜歡!
  • 六個基於Bootstrap的實用開發教程和模板演示
    關於Bootstrap,相信大家一定不陌生,它已經成為現在主流產業的一個重要工具,Bootstrap提供了優雅的HTML和CSS規範,它基於jQuery框架開發的,它在jQuery框架的基礎上進行了更為個性化和人性化的完善,形成一套自己獨有的網站風格,併兼容大部分jQuery插件。
  • 程式設計師們最愛的12款Bootstrap模板 !
    如果你還沒有開始使用Bootstrap模板,那你可真是有夠OUT!這是一個幫助你快速開發的工具,Bootstrap是基於jQuery框架開發的,它在jQuery框架的基礎上進行了更為個性化和人性化的完善,形成一套自己獨有的網站風格,併兼容大部分jQuery插件。
  • 響應式頁面的布局原理、快速構建和適用範圍
    一個方法是為不同的設備專門製作對應的網站:當用戶訪問的時候,還是訪問PC的域名,然後識別用戶的設備,跳轉到對應的專門移動端頁面,這也就是很多網站m.域名的由來。目前主流前端UI框架都是響應式的,比如Bootstrap、jquery UI、dojo等。下面以Bootstrap為例,師範如何快速創建一個響應式頁面。先到bootstrap官網下載響應的文件,或者你可以用線上的,不過還是建議下載到本地。
  • 使用前端框架Foundation 4來幫助簡化響應式設計開發
    使用前端框架Foundation 4來幫助簡化響應式設計開發 Foundation是一套使用廣泛的前端開發套件,可以幫助你快速的網站。
  • DWZ + Bootstrap 整合應用(dwz for bootstrap v1.0.0)
    後續DWZ框架準備支持響應式。為了感謝大家多年來的支持,現推出DWZ+Bootstrap響應式臨時解決方案。
  • Web-第五天 BootStrap學習
    Bootstrap基礎入門使用的都是自帶CSS樣式,高級開發中需要使用HTML5、CSS3、動態CSS語言Less 進行自定義開發,JavaEE課程中學習時「基礎入門」。國內一些移動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap源碼進行性能優化而來中文官網:http://www.bootcss.com/ 1.2.1.2 什麼是響應式布局響應式布局:一個網站能夠兼容多個終端(手機、iPad等),而不需要為每個終端做一個特定的版本。
  • 學習寫個網站(4)-Bootstrap學習1
    Bootstrap,就是前端框架,可以直接使用一些設定的樣式,用的時候直接賦值class就行。它的class對css進行了封裝。