99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

登錄
首頁精彩閱讀如何使用Bootstrap快速開發(fā)Web前端?
如何使用Bootstrap快速開發(fā)Web前端?
2014-11-12
收藏

如何使用Bootstrap快速開發(fā)Web前端



作為一名菜鳥程序員，曾有幸參與過幾個站點的架設，感觸最深的是，前端堆砌太痛苦了!為了讓你的站點看起來美觀一點，你可能需要一點一點的去調整各個參數，反復修改，上下求索。這還只是考慮外觀的，要是再考慮交互的話，沒有一些工具在手，還真不是正常人能干的活。

世界著名社交網站Twitter的前端程序員們當然也面臨了同樣的問題，他們在解決了自己的痛苦之后，造福世界，創(chuàng)造了一個叫Bootstrap的開源項目，專門用于快速開發(fā)Web應用程序和網站。不得不說，他們太偉大了。

Bootstrap是一個用于快速開發(fā)Web應用程序和網站的前端框架，基于HTML、CSS和javascript?？催@三個是不是覺得有點不明覺厲?沒錯，Bootstrap幾乎包含了前端開發(fā)中你所需要的一切東西。而且，因為偉大的Twitter前端程序員們痛定思痛推己及人造福大眾，他們把Bootstrap做的非常簡潔方便，容易上手!是不是迫不及待了。
 為什么使用Bootstrap?

移動設備優(yōu)先：自Bootstrap3.0起，框架包含了貫穿于整個庫的移動設備優(yōu)先的樣式。就是說，你不需要專門針對移動設備進行優(yōu)化、識別，Bootstrap能夠自動以優(yōu)雅的方式將你的站點展現在用戶的移動設備上!在移動互聯網大行其道的今天，這一特性實在太誘人了。

瀏覽器支持：所有的主流瀏覽器都支持Bootstrap，沒錯，包括IE在內，Firefox、Opera、Chrome、Safari等等。前端程序員另一個非常頭疼的問題應該就是瀏覽器的兼容性了，你無法想象在Windows10已經放出來的今天，仍然有人在使用IE6.0，但是Web前端是不得不考慮這個的……

容易上手：只要你具備HTML和CSS的基礎知識，你就可以開始學習和使用Bootstrap!你沒聽錯，不需要專家，就是你，你可以很快上手Bootstrap!

響應式設計：查看 Web 頁面的設備包括小型移動電話，以及大于普通臺式計算機外形規(guī)格的顯示器。在響應式設計 中，一開始就在 Web 頁面中構建了靈活性，這樣用戶就可以通過所有設備查看頁面。響應式設計的核心是 CSS3 媒體查詢，這是根據設備性質(尤其是用戶的顯示器大小)來調用 CSS 規(guī)則的一種標準方法。對于典型開發(fā)人員啟動的各種項目，我建議首先使用啟用了響應特性的固定布局。固定布局更易于組織，而且響應特性支持從一開始就培養(yǎng)考慮網站如何在移動設備上運行的良好習慣。如果項目要應用于生產環(huán)境中，而且您正在與設計人員合作，那么設計人員應能夠使您的文件適用于更加適合的其他任何模型。Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。在各個平臺上，你都能夠看到優(yōu)雅的響應式效果!

還有好多特性，在此簡單羅列一下，雖只是簡單羅列，但是每一項對于Web前端人員來說都是十分誘人的：

?它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
?它包含了功能強大的內置組件，易于定制。
?它還提供了基于 Web 的定制。
?它是開源的。
? ……

如何使用Bootstrap

針對 Bootstrap 的 HTML

清單 ? 是一個有用的框架 HTML 文件，用于結合使用 Bootstrap 與一個固定布局和響應特性：

清單 ? 用于 Bootstrap 項目的基本框架 HTML 文件 (listing1.html)

 

\

 

縮小版本

在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一種形式是一個常規(guī)文件，第二種形式是壓縮文件或 “縮小文件”。就像在本文中一樣，使用縮小版本即可實現最有效的頁面加載。

listing1.html 的開始之處的 DOCTYPE 聲明將其標記為一個 HTML5 文件。head 元素內的 meta標記控制移動的小屏幕布局。(為方便起見，我將它們稱作 meta/viewport 標記。)默認情況下，大多數移動設備按比例縮小 Web 頁面，使之適應屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什么許多網站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport 聲明中的 initial-scale=1.0 部分禁用了這一行為，告訴設備要保持頁面的原有尺寸。該聲明表示 Web 設計人員(在本例中為 Bootstrap)已經完成了實現較小屏幕的響應式設計這一任務，所以在默認情況下，沒必要采用蠻力方法。

稍后，清單 1 的 head 標記是 Bootstrap CSS 的鏈接。在文件的末尾，加載 jQuery 和 Bootstrap 實用程序 JavaScript。這些腳本在末尾運行可實現最佳性能。

設置代碼

當使用 Bootstrap(或任何 Web 支持文件集)時，您可以從多種方法中選擇用來設置 HTML 和其他代碼的方法。我建議您創(chuàng)建一個文件夾來存儲自己的項目，然后將 Bootstrap 文件及其完整的文件夾結構復制到項目文件夾中。將您自己的 HTML 文件放在最頂層，并將您自己的 CSS、JavaScript 和圖像文件放在相應的 Bootstrap 子文件夾中(這些文件夾的名稱分別為 css、js 和 img)。然后，整體結構如下所示：

 

\

 

CSS 設備調整

meta/viewport 標記是當前的約定，用于將頁面調整為設備的可視瀏覽器空間。萬維網聯盟 (World Wide Web Consortium, W3C) 正在準備一種替換機制，該機制以一種新的 CSS 規(guī)則的形式出現(參見 參考資料)。清單 1 中 meta/viewport 聲明的等效 CSS 是：

 

\

 

目前，您可以將這個代碼包含在您的 CSS 中，并在 HTML 中保留 meta/viewport 標記。當 CSS 形式受到廣泛支持時，您就可以刪除meta/viewport 聲明。本文來自：http://cda.pinggu.org/


數據分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

數據分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機數防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調用 initGeetest 進行初始化 // 參數1：配置參數 // 參數2：回調，回調的第一個參數驗證碼對象，之后可以使用它調用相應的接口 initGeetest({ // 以下 4 個配置參數為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務器是否宕機 new_captcha: data.new_captcha, // 用于宕機時表示是新驗證碼的宕機 product: "float", // 產品形式，包括：float，popup width: "280px", https: true // 更多配置參數說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }