教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

Bootstrap前端開發框架【使用教程】

更新時間:2021年12月14日14時39分 來源:傳智教育 瀏覽次數:

Bootstrap 來自 Twitter(推特),是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。

中文官網:http://www.bootcss.com/ 

官網:http://getbootstrap.com/ 

推薦使用:http://bootstrap.css88.com/

框架:顧名思義就是一套架構,它有一套比較完整的網頁功能解決方案,而且控制權在框架本身,有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。

Bootstrap框架優點:

標準化的html+css編碼規范

提供了一套簡潔、直觀、強悍的組件

有自己的生態圈,不斷的更新迭代

讓開發更簡單,提高了開發的效率

Bootstrap自出現至今一共有3個類型的版本,使用最多最穩定的是3.x.x的版本。

2.x.x:停止維護,兼容性好,代碼不夠簡潔,功能不夠完善。

3.x.x:目前使用最多,穩定,但是放棄了 IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發響應式布局、移動設備優先的 WEB 項目。

4.x.x :最新版,目前還不是很流行

Bootstrap 使用四步曲: 1. 創建文件夾結構 2. 創建 html 骨架結構 3. 引入相關樣式文件 4. 書寫內容

1.創建文件夾結構

2.創建html骨架結構

<!--要求當前網頁使用IE瀏覽器最高版本的內核來渲染-->
<meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!--視口的設置:視口的寬度和設備一致,默認的縮放比例和PC端一致,用戶不能自行縮放-->
    <meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<!--[if lt IE 9]>
 <!--解決ie9以下瀏覽器對html5新增標簽的不識別,并導致CSS不起作用的問題-->
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
        </script>
        <!--解決ie9以下瀏覽器對 css3 Media Query 的不識別 -->
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
        </script>
    <![endif]-->

3. 引入相關樣式文件

<!-- Bootstrap 核心樣式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4. 書寫內容

直接拿Bootstrap 預先定義好的樣式來使用

修改Bootstrap 原來的樣式,注意權重問題

學好Bootstrap 的關鍵在于知道它定義了哪些樣式,以及這些樣式能實現什么樣的效果

布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器,它提供了兩個作此用處的類。

1. container 類

響應式布局的容器 固定寬度

大屏 ( >=1200px) 寬度定為 1170px 

中屏 ( >=992px) 寬度定為 970px 

小屏 ( >=768px) 寬度定為 750px 

超小屏 (100%)

2. container-fluid 類

流式布局容器 百分百寬度 占據全部視口(viewport)的容器。

好口碑IT培訓




猜你喜歡:

Bootstrap是什么?有什么用處?

Bootstrap簡介,如何下載和使用Bootstrap?

Bootstrap源文件的目錄結構是怎樣的?

Bootstrap源文件的目錄結構是怎樣的?

傳智教育前端與移動開發培訓

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载