1. 程式人生 > >Bootstrap學習

Bootstrap學習

系列 靈活 引入 實例 觸屏 str -s 功能 設備

一、Bootstrap的介紹

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的,它簡潔靈活,使得 Web 開發更加快捷。它用於開發響應式布局、移動設備優先的 WEB 項目

二、Bootstrap的下載

2.1使用Bootstrap第一步,先將生成環境的Bootstrap下載下來。然後將下載,然後引入到自己建好的當前目錄中

技術分享圖片

技術分享圖片

2.2點到起步中的基本模板

將看到的整段代碼復制粘貼到建好的index.html文件中

官網明確表示:
使用此給出的這份超級簡單的HTML模板,或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改,而不要簡單的復制、粘貼

Bootstrap支持移動設備優先

2.2點到起步中的基本模板

將看到的整段代碼復制粘貼到建好的index.html文件中

官網明確表示:
使用此給出的這份超級簡單的HTML模板,或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改,而不要簡單的復制、粘貼

Bootstrap支持移動設備優先

也就是說使用Bootstrap可以在移動設備上運行。為了確保適當的繪制和觸屏縮放,需要在<head>之中添加viewport元數據標簽

<meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上,通過為視口(viewport)設置 meta 屬性為 user-scalable=no 可以禁用其縮放(zooming)功能。這樣禁用縮放功能後,用戶只能滾動屏幕,就能讓你的網站看上去更像原生應用的感覺。註意,這種方式我們並不推薦所有網站使用,還是要看你自己的情況而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap重置樣式

為了增強跨瀏覽器表現的一致性,我們使用了 Normalize.css,這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。註意,由於 padding 等屬性的原因,這兩種 容器類不能互相嵌套。

.container 類用於固定寬度並支持響應式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 類用於 100% 寬度,占據全部視口(viewport)的容器。

<div class="container-fluid">
  ...
</div>

柵格系統

柵格系統的鼻祖是 https://960.gs/.

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨著屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列

柵格系統用於通過一系列的行(row)與列(column)的組合來創建頁面布局,你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理:

技術分享圖片

柵格參數

技術分享圖片

使用單一的一組 .col-md-* 柵格類,就可以創建一個基本的柵格系統,在手機和平板設備上一開始是堆疊在一起的(超小屏幕到小屏幕這一範圍),在桌面(中等)屏幕設備上變為水平排列。所有“列(column)必須放在 ” .row 內。

一些常使用網站

阿裏巴巴圖標庫網站:

如果想做圖表,那可以去官網:http://echarts.baidu.com/或者https://chartjs.bootcss.com/

PS:還是那句話,使用Bootstrap非常簡單,根據項目的需求適當去官網復制粘貼,然後根據需求更改自己的內容,如果想修改自己的樣式,可以添加類,按照之前咱們學習css一樣的方式,給它相應的樣式

Bootstrap學習