【前端框架】bootstrap框架的引入使用

這是一款開源免費的前端框架,能夠幫助我們很快速的搭建一個頁面,優化代碼,符號w3c標準,並且兼容IE6及以下瀏覽器。

方法/步驟

首先要進入官網,我們直接百度bootstrap,看得有個中文網,進入就可以了,或者看下圖地址欄輸入。

單擊頁面上的下載按鈕,進入如下模塊中,我們能夠看到能夠下載的安裝包。

這裡往下拉,它有非常多的安裝方式,這裡我們就選擇第一個就好了,單擊「下載Bootstrap」按鈕進入下載。

進入下載文件夾進行解壓,這裡我們可以看得解壓後文件夾中所包含的文件。我們所需要知道的是,css是樣式文件夾,裡面包含了所有構造樣式類,js是基於jQuery的行為文件夾,在引入js文件前需要先引入jQuery的js文件,font用於存儲圖標。

現在我們創建一個新項目。將框架目錄放到文件夾下面。然後創建一個html的文件作為頁面容器。

現在我們需要將需要的文件引入,具體如圖所示。

為了兼容手機端,還需要添加一條

<meta name="viewpor" content="width=device-width,initial-scale=1.0">

我們可以打開瀏覽器查看添加了框架和沒有添加框架的具體效果。在這裡全部都是優秀的使用Bootstrap框架的頁面,我們可以進行參考。

相關文章

  1. HTML 5 前端框架 Bootstrap 使用教程

    Bootstrap是Twitter推出的一個開源的前端框架. Bootstrap由Twitter的設計師Mark Otto和Jacob Thornton合作開發,由動態語言Less寫成.它是一套&qu ...
  2. 快速使用前端bootstrap框架

    前端bootstrap框架,簡單,快捷,方便,視覺舒服,很容易學會. 工具/原料 bootstrap 開發工具dw 方法/步驟 進入官網下載"bootstrap"文件包. 打開開發 ...
  3. 如何使用前端框架Bootstrap製作導航條?

    Bootstrap作為前端流行的css框架,可以對網頁結構進行美化.小編就教大家如何直接使用Bootstrap來生成導航條? 工具/原料 Bootstrap3 方法/步驟 首先新建html文件,導入B ...
  4. 如何利用AngularJS和Bootstrap框架獲取table行

    有一張表格,利用Bootstrap設置其樣式,AngularJS獲取表格的數據.根據按鈕點擊事件,獲取表格行數據,然後分別按照列來裝到數組中,並列印數組的結果.下面利用一個實例實現這個場景,操作如下: ...
  5. Bootstrap框架的簡單登錄界面設計

    Bootstrap框架的簡單登錄界面設計 方法/步驟 Bootstrap本身的樣式雖然能夠幫助我們快速地開發出一個Web頁面,但要想達到更高的一個層次,我們還需修改並且添加自己的樣式,並配合使用一些其 ...
  6. bootstrap框架怎麼在html頁面加載使用

    bootstrap框架是目前流行的開源框架,如何使得框架能夠在頁面中正常加載並使用,本文將介紹使用的步驟,和使用的兩種情況 工具/原料 文本,bootstrap框架的用於生產環境的編譯並壓縮後的 CS ...
  7. Bootstrap框架排版三

    排版中包含標題.頁面主體.內聯文本元素.對齊.改變大小寫.縮略語.地址.引用.列表. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 對齊:通過文本對齊類,可以簡單方便的將文字重新對 ...
  8. 前端開發CSS框架Bulma的使用教程

    在前端開發中我們不僅僅是接觸到得有js框架,還有許多的CSS框架,我想大家最熟悉的應該是Bootstrap這個著名的CS 框架,但是今天給大家推薦另一個更輕量化.更易用的框架--Bulma. 工具/原 ...
  9. 如何使用Bootstrap框架

    Bootstrap框架是一個非常受歡迎的前端開發框架,他能讓後端程式設計師和不懂設計的前端人員製作出優美的Web頁面或Web應用程式. 基於html5.css3的bootstrap,具有大量的誘人特性:友 ...
  10. bootstrap框架使用Less四

    變量,顏色,scaffolding,連結,排版,圖標,組件,box-sizing,圓角,隱形,過渡效果,變形,動畫,透明度,占位符文本,列,漸變,清除浮動,水平居中,尺寸助手mixin,可調整大小的文 ...
  11. 技術乾貨:bootstrap框架製作手風琴效果

    讓複雜的效果簡單化 工具/原料 Hbuilder或Dreamweaver編輯器 方法/步驟 bootstrap框架是基於HTML5.CSS3.JQuery 的開源框架,構建適合 PC 和移動端設備兩方 ...
  12. bootstrap框架使用Less五

    變量,顏色,scaffolding,連結,排版,圖標,組件,box-sizing,圓角,隱形,過渡效果,變形,動畫,透明度,占位符文本,列,漸變,清除浮動,水平居中,尺寸助手mixin,可調整大小的文 ...
  13. bootstrap框架如何使用圖標

    出於性能的考慮,所有圖標都需要一個基類和對應每個圖標的類.為了設置正確的內補(padding),務必在圖標和文本之間添加一個空格. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 圖 ...
  14. bootstrap框架使用Less三

    變量,顏色,scaffolding,連結,排版,圖標,組件,box-sizing,圓角,隱形,過渡效果,變形,動畫,透明度,占位符文本,列,漸變,清除浮動,水平居中,尺寸助手mixin,可調整大小的文 ...
  15. 仿dede會員註冊頁面使用Bootstrap框架。

    仿dede會員註冊頁面使用Bootstrap框架. 工具/原料 dede-Bootstrap 方法/步驟 1.把bootstrap樣式文件引入到模板templets\default\style下. 2 ...
  16. Bootstrap框架概覽

    深入了解 Bootstrap 底層結構的關鍵部分,包括我們讓 web 開發變得更好.更快.更強壯的最佳實踐. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 HTML5 文檔類型: ...
  17. bootstrap框架中的圖片輪播

    bootstrap框架中的輪播圖 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 圖片輪播基本上每個網站都會有,它可以自己滾動,也可以手動滾動. 編寫上圖的代碼. 解析代碼中的各個屬 ...
  18. 技術乾貨:bootstrap框架實現輪播圖

    輪播圖的框架實現方法 工具/原料 Hbuilder或Dreamweaver編輯器 方法/步驟 bootstrap框架提供了快速.強大的輪播圖功能,只要熟悉輪播圖的相關類,就可以輕鬆實現需要的效果. 案 ...
  19. bootstrap框架中的按鈕

    通過按鈕組容器把一組按鈕放在同一行里.可以設置為單選框或多選框的樣式. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 創建div標籤,為div標籤添加.btn-group類. 按鈕 ...
  20. bootstrap框架中按鈕式下拉菜單

    把任意一個按鈕放入 .btn-group 中,然後加入適當的菜單標籤,就可以讓按鈕作為下拉菜單使用了. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 單按鈕下拉菜單,在按鈕類里添加 ...