BootStrap之基礎-1 BootStrap起步(基本概念、環境搭建)

1、基本概念css


Bootstrap 簡介html

wKiom1cDcKfTKIuHAAMeXcyCego943.png


  - 移動設備優先html5

      - 全部的主流瀏覽器都支持Bootstrapweb

        它既是由動態CSS語言Less寫成bootstrap

        Github熱門開源項目瀏覽器

        包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目框架


夠成ide

wKiom1cDcV-xM1dIAAI6k3F3YeU059.png


Bootstrap 目錄說明佈局

  - CSS目錄--用於存放Bootstrap框架使用的樣式文件字體

      - bootstrap.css文件: Bootstrap框架的樣式文件

      - bootstrap.min.css文件:Bootstrap框架的樣式壓縮文件

      - bootstrap.theme.css文件:Bootstrap框架的主題文件

  - fonts目錄--用於存放Bootstrap框架使用的字體文件

  - js目錄--用於存放Bootstrap框架使用的核心Javascript文件

      - bootstrap.js文件:Bootstrap框架的核心Javascript文件

      - bootstrap.min.js文件:Bootstrap框架的核心Javascript壓縮文件


Bootstrap 相關技術

  - 因爲Bootstrap框架是基於jQuery使用的Javascript代碼,因此想要使用Bootstrap框架,必需要先引入jQuery文件

      - html5shiv.min.js文件:解決 IE8瀏覽器支持HTML5的新元素

      - respond.min.js文件:解決 IE8瀏覽器支持 CSS Media Query


2、環境搭建


基本模板

  - 聲明

  - 元數據

  - 樣式

  - 腳本

  - 兼容性

wKiom1cDdWvj3lhnAAEFVJ_CBzY261.png


編寫Bootstrap模板

  - DOCTYPE聲明

  - 父路徑

  - 元數據

  - 樣式引用

  - 腳本引用

  - 兼容性註釋

  - 容器

wKioL1cDdnKi-AsuAAAuJect1fA343.png



禁用響應式佈局

  - 移除 CSS 文檔中(viewport)的標籤:<meta>

  - 經過爲.container 類設置一個固定width值

  - 須要移除全部導航條的摺疊和展開行爲

  - 添加 .col-xs-* 類或替換掉.col-md-* 和 .col-lg-*


總結:本章內容主要介紹了 BootStrap 起步(基本概念、環境搭建)

相關文章
相關標籤/搜索