1. 首頁 > 生活百科 > >

bootstrap底部導航欄 bootstrap遮罩層

生活百科


互聯網時代的到來，*** 界面不斷地優化，不斷地追求美感 。包括各種各樣的網頁設計 ***，包括幽靈按鈕、更強調字體、視頻背景、卡片式設計、扁平化以及響應式設計，為了更加便于開發前端頁面，前端框架應運而生，其中Bootstrap是最有名的一個 。
一開始學習這個框架的時候，說實話（誰還不是一個菜鳥） 。開始接觸這個布局框架的時候就是感覺到無力 。學過框架的人都說簡單，覺得肯定是騙人的 。你看首先要用這個框架必須搭建環境，這就難倒很多人 。比如說HTML用搭建環境嗎?顯而易見，肯定不用搭配環境 。當我們知道真相的時候我們的悲傷肯定小于喜悅的，因為它有環境搭配的方式，只不過比HTML要麻煩一點 。想學會框架必須了解它的工作原理 。雖然說這個框架和之前接觸到的HTML、CSS有所不同，但是原理都是一樣的 。理解這個框架我們可以從不同角度來理解，比如說一個容器，你可以理解成一個房子，一棟樓，一個空間等，比如說網格可以理解成組成部分 。其實不管我們用什么方式理解，都要選擇適合自己記憶的理解方式 。不知道大家在學習這個框架之前，有沒有和我一樣的困惑？
【bootstrap底部導航欄bootstrap遮罩層】首先它簡潔，方便，兼容性強 。大家使用這個框架不用在學別的前端知識，因為它囊括了 HTML、CSS、JavaScript這幾種前端知識方便大家快速上手 。曾經由于屏幕大小的問題需要我們一遍又一遍的更改網頁樣式，但是由于Bootstrap的出現不再擔心這個問題了 。原因是什么：它是響應式框架適用于各種屏幕大小 。除了這些它最讓我欣賞的就是它的網頁布局：它給人們帶來一種簡約的美，更能體現出化繁為簡這個道理 。不管是京東還是蘇寧，進網頁一看不會讓你感覺視覺疲勞，把物品表達的清清楚楚 。
下面是一些個人對Bootstrap的理解請大家糾錯一起共勉 。首先我們學習Bootstrap我們明確以幾點：
什么是Bootstrap?怎么搭配環境呢？它是怎組成一個布局的？它是用來干什么的？它的弊端在那里的？1. 什么是Bootstrap?
首先我們來普及一下概念：
Bootstrap是一個前端框架、是目前更受歡迎、更流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起開發的，Bootstrap框架是基于HTML、CSS、JavaScript 開發的，它因簡潔、直觀、功能強大被開發者廣發使用 。Bootstrap前端框架使得 Web 開發更加快捷，提供了優雅的HTML、CSS和JavaScript規范，它是由動態CSS語言Less寫成 。Bootstrap前端框架剛推出就頗受歡迎，一直是GitHub上的熱門開源項目，是一些前端開發者較為熟悉的框架 。
其實就是對HTML、CSS和 *** 的一種包裝！
只要我們掌握了HTML和CSS基礎的知識我們就可以一起學習Bootstrap了 。
2. 怎么搭配Bootstrap的環境呢？
首先我們在網站下載一個Bootstrap壓縮包，之后解壓（除了系統盤別的盤都可以）
Bootstrap提供了三種不同的方式幫助你快速開發，每種方式可根據開發者的能力和使用場景而定，具體如下 。
用戶生產環境的Bootstrap：下載包為編譯并且壓縮后的CSS、JavaScript和字體文件，不包含文檔和源碼文件 。
Bootstrap源碼：包含Less、JavaScript和字體文件的源碼等 。
Sass：這是Bootstrap從Less到Sass的源碼移植項目，用于快速地在Rails、Compass或只針對Sass的項目中引入 。
參考地址如下 。
Bootstrap官網： http://www.bootstrap.com/ 。
Boostrap中文網：http://www.bootcss.com/
簡單模板
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>
<meta name=”viewport” content=”width=device-width, initial-scale=1″/>
<title>Bootstrap基本模板</title>
<link href=https://www.juguize.com/b/”../bootstrap-3.3.4/css/bootstrap.min.css” rel=”stylesheet” />
<link href=https://www.juguize.com/b/”../bootstrap-3.3.4/css/bootstrap-theme.min.css” rel=”stylesheet” />
<!–[if lt IE 9]>
<script src=https://www.juguize.com/b/”../bootstrap-3.3.4/js/html5shiv.min.js”>
<script src=https://www.juguize.com/b/”../bootstrap-3.3.4/js/respond.min.js”>
<![endif]–>
</head>
<body>
<h1>您好,Bootstrap 從此刻開始</h1>
<script src=https://www.juguize.com/b/”../bootstrap-3.3.4/js/jquery.min.js” type=”text/javascript”>
<script src=https://www.juguize.com/b/”../bootstrap-3.3.4/js/bootstrap.min.js” type=”text/javascript”>

推薦閱讀