1. 如何搭建web前端框架
搭建web前端框架步驟如下：
1、確定項目使用的技術
根據項目的需求等來選擇使用的技術（這里以angular4 + typsescript + nodejs+mongodb舉例）
2、新建一個項目的工作文件夾
使用npm init初始化項目，根據問題配置，一般是直接回車使用默認配置,生成package.json文件
3、新建一個index.html頁面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript
6、新建webApp目錄，這裡面放的是所有html頁面和js代碼，首先得有個入口文件，與system.config.js配置文件中的入口文件名一樣，app.mole.ts，裡面引入了所有js文件，不被引入的在載入時都不會被載入
7、打包(將代碼壓縮，使程序運行速度更快）
2. 怎麼使用web前端框架bootstrap
如何使用Bootstrap
針對 Bootstrap 的 HTML
清單 • 是一個有用的框架 HTML 文件，用於結合使用 Bootstrap 與一個固定布局和響應特性：
清單 • 用於 Bootstrap 項目的基本框架 HTML 文件 (listing1.html)
縮小版本
在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一種形式是一個常規文件，第二種形式是壓縮文件或 「縮小文件」。就像在本文中一樣，使用縮小版本即可實現最有效的頁面載入。
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 和其他代碼的方法。我建議您創建一個文件夾來存儲自己的項目，然後將 Bootstrap 文件及其完整的文件夾結構復制到項目文件夾中。將您自己的 HTML 文件放在最頂層，並將您自己的 CSS、JavaScript 和圖像文件放在相應的 Bootstrap 子文件夾中(這些文件夾的名稱分別為 css、js 和 img)。
3. 什麼是框架在開發系統時如何使用框架謝謝！
軟體開發框架是什麼？現在主流的開發框架是一種基於B/S(Brouser/Server)結構技術的web框架，以網頁的表現形式，包含前端、後端和資料庫三個大的方向，各個方向的技術框架都不一樣，現在主流的技術框架包含JAVA、.NET、sqlServer、Bootstrap等，了解了這些也就知道軟體開發中的框架是什麼了。
軟體開發框架詳解
軟體開發框架前端技術包括三個要素：HTML、CSS和JavaScript，還有很多高級的前端框架，比如bootstrap、Jquery等，前端開發也是比較的復雜，如果找到規律，開發起來也比較的快。
軟體開發框架後端技術也有很多，比如.Net、JAVA、PHP等，各大語言都有其開發架構，像.NET的MVC架構，JAVA的Java EE，一般web後端技術的知識面是很廣的，語言、設計模式、需求分析、性能優化等都要懂。
軟體開發框架資料庫技術現在有三種主流的關系型資料庫：MysqlSQLserverOracle，還有Nosql等結構性關系型資料庫：Redis、Mogodb等。
那麼在開發系統是如何使用框架呢，開發框架是技術框架的大集成，也是經過項目檢驗的，集許可權管理+快速開發+動態介面+通用組件+動態UI於一體的全新.net信息化快速開發框架，可以根據一定的開發套路來使用框架來開發系統
如何使用開發框架
4. bootstrap前端框架的模板文件怎麼使用應用到Web項目中
引入css和js，然後就是使用它的class名稱
5. 目前常用的一些前端的框架
目前常用的一些前端的框架如下：
1.Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（buttongroups），導航面板（navigationcontrol）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁升激碼（pagination），縮略圖(thumbnails)，進度條（progressbars），媒體對象（mediaobjects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tooltips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示核枯(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的Web界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的改笑洞一部分工具和資源。
jQueryUIBootstrap——對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把Bootstrap的清爽界面組件引入到jQueryUI中。
jQueryMobileBootstrapTheme——和上面提到的jQueryUI主題類似，這是一個為jQuerymobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
FuelUX——它為Bootstrap添加了一些輕量的JavaScript控制項。FuelUI安裝，修改，更新以及優化都很簡單方便。
info——Bootstrap提供了自己的幾種界面風格，提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr——利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch——提供大量免費的Bootstrap主題。
Bootsnipp——在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於BootstrapHTML/CSS/JavaScript架構的免費元素。
LayoutIt——通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2、flex
Apache基金會發布了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日，ApacheFlex技術社區發布了全新的ApacheFlex4.12.0版本，該版本是ApacheFlex4.11.0的升級版本，改進的功能包括：
◆支持最新版本的FlashPlayer
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex4.12.1，新版本加入對全新FlashPlayer及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。
3、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控制項都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
5、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQueryMiniUI_快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
6、jQueryUI
jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
7、DWZ
DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
8、GWT
Google網頁工具包——GWT提供了一組基於Java語言的開發包，這個開發包的設計參考JavaAWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉JavaAWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！
9、YUI
Yahoo!UILibrary(YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權為BSD許可證，基本上沒怎麼研究過！
YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！
10、Sencha
Sencha是由ExtJS、jQTouch以及Raphael三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦！
11、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！
12、ZK
ZK是一套以AJAX/XUL/Java為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以及以XML為基礎的使用介面設計語言ZKUser-interfacesMarkupLanguage(ZUML)。
功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！
13、OperaMasks-UI
OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
14、JavaFX
Sun公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用JavaFX編程語言開發富互聯網應用程序(RIA)。JavaFXScript編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative,staticallytyped(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用JavaAPI的能力。因為JavaFXScript是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序變為可能。
6. 開箱即用的React前端框架——ReactAdmin
ReactAdmin是一個Github上免費開源的前端框架（不是組件庫，也不是模板，它是一個框架），採用es6、React和Material Design構建基於Rest/GraphQl API的Web應用程序。在React上star數超過8k。
https://github.com/marmelab/react-admin
ReactAdmin不是個UI組件庫，它是一個前端框架，因此你基本上基本上只要按照官網的文檔進行一些配置等然後在其基礎上開發自己的應用程序即可，可謂開箱即用，意識就是都給你集成好了。
你可以直接使用以下命令進行安裝（這是安裝react-admin及所有的依賴）
下面我們看一下官網提供的一個最簡單的示例，你可以在它的主倉庫中獲取
我們進入到simple中，大致看一下代碼和目錄結構
我們安裝一些依賴然後啟動
成功後打開瀏覽器，這是使用react-admin最簡單的一個例子
一圖了解
由於ReactAdmin是一個非常復雜的框架，你可以參考提供的文檔，我這里就不詳細介紹了，感興趣的可以直接看文檔，文檔是英文的，所有的說明都在文檔中。
https://marmelab.com/react-admin/
ReactAdmin它是一個集合，它將一些前端開發所需要的東西都集成了進來，然後做好，我們直接使用即可，不僅僅適合個人學習，也適合通過它來構建企業級的應用。我們不僅僅是拿過來直接用，我們可看一看別人是怎麼實現這樣的一個框架的，從源碼去學習會更快的提升自己的水平，希望對你有所幫助！
7. express框架怎麼用react框架作為前端框架
1.不要陷入糾結工具的怪圈我們團隊一開始用React的時候，工具棧應該是grunt+grunt-react；寫了一段時間感覺有局限，然後老大帶頭把工具換成了gulp+browserify+watchify+reactify，然後又愉快的寫了大概半年吧，發現流行的庫都上webpack了；於是我們的工具棧又變成了gulp+webpack+babel-loader。最後大家一致認為gulp是多餘的，所以我們的工具棧又圍繞webpack重新搭建了一遍。到最近我負責的一個內部項目，什麼hot-mole-replacement、extract-text-plugin（讓你在js里require('style.scss');這么寫的玩意兒）一股腦的造。當然再後來因為業務需要我們又基於webpack搭建了自己的構建工具，這是後話……這將近一年半的折騰歷史告訴大家，1)前端就是個大坑，1個月不學新知識你就會被社區遺忘2)現在上React真幸福，工具棧基本都穩定了（什麼？你還不懂？用webpack！），不用花太多時間糾結。PS.HMR也就那樣，雖然dan吹得神乎其神，但實際在項目里我發現大家還是習慣手動Cmd+R，因為項目大了以後rebuild也需要1、2秒。2.DOM操作是不可避免的但凡是上點兒規模的前端項目，沒有DOM操作基本是不可能的。且不說最常見的後端「埋點」，你總得用DOMAPI去取值吧；就說一個最簡單的，比如右手邊這個「回到頂部」的按鈕，你純用React寫一個試試。當然你會說什麼requestAnimationFrame，什麼，真正到項目里你會發現還是DOMAPI簡單。3.擁抱ES6，擁抱Reactv0.14這倆為什麼放在一起說呢？因為Reactv0.14里提出了一個全新的組件概念叫做：無狀態的函數式組件（Statelessfunctionalcomponents）。它大概長這樣：varAquarium=({species})=>({getFish(species)});有沒有發現被傳統的createClass方法精簡了很多？當然這樣寫組件也有很多局限，比如不能聲明各種生命周期方法等等，但是在常見的前端業務場景中，純render的組件不在少數。在這樣的語法推出後，我們就能把這些組件更方便的抽出來復用了。此外，擁抱ES6還有很多的好處，比如在載入依賴的時候不用先varxxx=require('xxx');再varyyy=xxx.yyy;而是可以直接import{yyy}from'xxx';簡潔明了。4.生態環境仍然在成長中，坑不少其中首先要口誅筆伐一下的就是react-router，我們從v0.10開始用，到現在v1.0。你知道為了升級這玩意兒我們改了多少次業務代碼么？每次升級API都要變，無力吐槽。當年好不容易搞懂了v0.11，在博客里寫了篇技術文章分享，結果後面的日子就是各種被催更……一個月前抽空就0.13版又重寫了一遍教程，這不1.0版又出了，API基本全都不一樣了！！不一樣了！！一樣了！！樣了！當然除了坑也有不少高質量的生態環境產品，比如螞蟻的antdesign。5.Server端渲染很美，至今沒看見哪個規模級的產品用到可能是我孤陋寡聞吧，歡迎評論中跟進。自己摸索著寫過一個最簡單的server端渲染，但是這套邏輯如果套到我們現在的業務邏輯中，幾乎可以直接槍斃。為了實現server端渲染需要做出的tradeoff太多。6.React很簡單，也很難簡單是因為React的API真的很少，官網的各種文檔花一個下午也能看個七七八八（此時此刻再看看Angular……）。但是當你以為你真的搞懂React的時候，看看React源碼剖析系列－解密setState-purerender-知乎專欄這篇文章開頭提的問題，有多少人能不假思索的答對呢？（順便安利一下，我們團隊的知乎專欄，目前處於死磕React的狀態）當你真正在業務項目中使用React的時候，你會發現它的生命周期比你想像的復雜；它的API背後的邏輯比你以為的麻煩。當然，首先你要踩進這個坑。7.對於樓上某位仁兄表示《React：引領未來的用戶界面開發框架》這本書太難的回答，作為譯者之一表示對不起你。作為補償，所有購買本書的同學均可憑拍照私信我咨詢React相關的問題。