Bootstrap是由Twitter發布一款目前最受歡迎的前端框架。Bootstrap基于 HTML、CSS、JAVASCRIPT的，它簡潔靈活，將常見的CSS布局、常用組件和JavaScript插件進行了完整并完善的封裝，能讓沒有經驗的前端工程師和后端開發工程師都迅速掌握和使用，大大提高開發效率，它還在某種程度上規范前端團隊編寫CSS和JavaScript的規范。總之學習Bootstrap可以讓你很輕松開發出響應式的WEB項目。
32章節|182361次播放
課程目標了解Bootstrap注意：在學習這門課程之前，大家最好已經學習過了 HTML、CSS、JAVASCRIPT這些內容。Bootstrap簡介Bootstrap 是最受歡迎的 HTML、CSS 和 JS框架，用于開發響應式布局、移動設備優先的 WEB 項目,由Twitter于2011年8月在G... 查看原文
下載Bootstrap打開官方網站//getbootstrap.com/，點擊Download Bootstrap。1) 下載用于生產環境的文件2) 下載用于編譯css的Less源碼及插件的js源文件3) 下載用于編譯css的Lass源碼及插件的js源文件4) Bootstrap文件結構其... 查看原文
Bootstrap柵格系統布局1、柵格系統簡介1）響應式設計我們現實生活中所使用到的設備有手機、平板電腦、筆記本、臺式機。這些設備最大的區別在于它的屏幕的大小不一樣，也就是分辨率大小不一樣。響應式設計最核心的思想是就一個網站能夠兼容多個終端，而不是為每個終端特定的一個版本。頁面的設計與開發應當根據用... 查看原文
跨設備組合定義定義一行，在中等分辨率下是8:4，在超小分辨率下是6:6，在小分辨率下是3:6<hr /> ? <div class="row"> ? ?<div class="col-md-8 col-xs-6 col-sm-3">8</div> ? ?<div class="col-... 查看原文
刪除viewpt的meta? ? 要禁止響應布局很簡單，第一步把移動設備優先刪掉<meta name="viewport" content="width=device-width, initial-scale=1">為.container設為固定寬度然后直接用id運行結果：這就是我們傳統的外文模式。... 查看原文
排版前的基礎1.HTML5文檔類型<!DOCTYPE html><html>? ?<head>? ?<meta charset="utf-8">? </head>? <body></body></html>2.移動設備優先<meta name="viewport" content="width=de... 查看原文
1.定義標題樣式2.運行效果3.定義4.運行效果，表面上看是差不多的，但其實你看這兩個的源代碼，第二種樣式是沒有定義margin-top和 marging-bottom，第一種標簽則定義了margin-top和marging-bottom5.使用small小字體標簽<h1>第一個標題樣式<small... 查看原文
列表分類無序列表2.有序列表3.去點列表 .list-unstyled4.內聯列表 .list_inline5.dl列表6.水平列表dl.dl-horizontal使用列表的具體操作學習如何使用無序列表、有序列表、去點列表、內聯列表、dl列表以及水平列表，具體的操作如下：1）新建一個web項目ch0... 查看原文
代碼標簽<code>顯示單行內聯代碼2.<kbd>顯示用戶輸入代碼3.<pre>多行代碼塊4.<var>變量5.<samp>程序結果使用代碼操作學習如何使用<code>、<kbd>、<pre>、<var>、<samp>代碼標簽，具體操作如下：1）新建一個demo02.html，將demo01.htm... 查看原文
Bootstrap表格樣式分類基礎樣式.table2.帶背條紋表格.table-striped3.帶邊框.table-border4.懸停.table-hover5.緊湊.table-condensed6.行樣式 .active .success .info7.響應式表格具體使用操作學習如何使用基礎... 查看原文
主要內容全局樣式2.form-control3.form-group4.實際操作操作1、新建一個web項目ch062、然后將我們bootstrap用到的css、JavaScript文件導進來。3、在ch06中新建一個demo01.html，接著再打開demo01.html，將移動設備優和css文件先... 查看原文
實際操作1.新建demo02.html，并將demo01.html復制到demo02.html。2.我們只需在form標簽上加一個form-inline，它就變成內聯表單了<form action="#" method="post" class="form-inline">3.運行效果（在一條水平線... 查看原文
主要內容在form上應用.form-horizontal2.使用柵格系統3.實際操作操作1、新建一個demo03.html，接著再打開demo03.html，將移動設備優和css文件先導入到頭文件（粘貼過來就行了），保存一下。<meta name="viewport"//移動設備優content="... 查看原文
1.我們切換到bootstrap的中文網，找到被支持的控件。注意“只有正確設置了type屬性的輸入空間才能被賦予正確的樣式”這句話。比如說，要格式化文本，它是這樣格式化的。我們可以通過行和列來指定文本域的寬度。2.表單控件實例2.1textarea在ch06中新建一個demo04.html，在里面添... 查看原文
1.焦點狀態autofocus就是頁面加載完以后它自動獲得焦點。運行效果：2.禁用狀態disabled表示禁用掉的狀態運行效果：3.被禁用的fieldset運行效果，這樣fieldset里面所有的組件就被禁用掉了4.只讀狀態運行效果：讓它獲得焦點時的狀態?</div> <div class=" fo... 查看原文
1.在ch06中新建一個demo05.html，將之前的demo01.html中的內容復制粘貼到demo05.html。刪除多余的控件，只留下“用戶名”這個控件就行了。2.在文本框加入這個小圖標（首先就需要在外層的div里面加一個has-feedback，因為這是需要它對小圖標進行定位。然后我們需要... 查看原文
Bootstrap入門 思維導圖所屬章節：Bootstrap入門 思維導圖Bootstrap柵格系統布局 思維導圖所屬章節：Bootstrap柵格系統布局 思維導圖Bootstrap文本排版 思維導圖所屬章節：Bootstrap文本排版 思維導圖列表與代碼 思維導圖所屬章節：列表與代碼 思維導圖Bootstrap表格樣式 思維導圖所屬章節：Bootstrap表格樣式 思維導圖Bootstrap表單樣式 思維導圖所屬章節：Bootstrap表單樣式 思維導圖Bootstrap按鈕樣式 思維導圖所屬章節：Bootstrap按鈕樣式 思維導圖Bootstrap圖片 思維導圖所屬章節：Bootstrap圖片 思維導圖Bootstrap簡介 源碼所屬章節：Bootstrap簡介 源碼Bootstrap柵格系統 源碼所屬章節：Bootstrap柵格系統 源碼Bootstrap排版基礎 源碼所屬章節：Bootstrap排版基礎 源碼bootstrap列表與代碼樣式 源碼所屬章節：bootstrap列表與代碼樣式 源碼Bootstrap表格樣式 源碼所屬章節：Bootstrap表格樣式 源碼Bootstrap表單樣式 源碼所屬章節：Bootstrap表單樣式 源碼Bootstrap按鈕 源碼所屬章節：Bootstrap按鈕 源碼Bootstrap圖片與輔助樣式 源碼所屬章節：Bootstrap圖片與輔助樣式 源碼Bootstrap小圖標 思維導圖所屬章節：Bootstrap小圖標 思維導圖Bootstrap小圖標 源碼所屬章節：Bootstrap小圖標 源碼Bootstrap下拉菜單 思維導圖所屬章節：Bootstrap下拉菜單 思維導圖Bootstrap下拉菜單 源碼所屬章節：Bootstrap下拉菜單 源碼Bootstrap按鈕組 思維導圖所屬章節：Bootstrap按鈕組 思維導圖Bootstrap按鈕組 源碼所屬章節：Bootstrap按鈕組 源碼Bootstrap按鈕下拉菜單 思維導圖所屬章節：Bootstrap按鈕下拉菜單 思維導圖Bootstrap按鈕下拉菜單 源碼所屬章節：Bootstrap按鈕下拉菜單 源碼Bootstrap輸入框 思維導圖所屬章節：Bootstrap輸入框 思維導圖Bootstrap輸入框 源碼所屬章節：Bootstrap輸入框 源碼Bootstrap導航 思維導圖所屬章節：Bootstrap導航 思維導圖Bootstrap導航 源碼所屬章節：Bootstrap導航 源碼Bootstrap導航條 思維導圖所屬章節：Bootstrap導航條 思維導圖Bootstrap導航條 源碼所屬章節：Bootstrap導航條 源碼Bootstrap面包屑導航和分頁導航 思維導圖所屬章節：Bootstrap面包屑導航和分頁導航 思維導圖Bootstrap面包屑導航和分頁導航 源碼所屬章節：Bootstrap面包屑導航和分頁導航 源碼標簽、徽章、大屏展播、頁面標題 思維導圖所屬章節：標簽、徽章、大屏展播、頁面標題 思維導圖標簽、徽章、大屏展播、頁面標題 源碼所屬章節：標簽、徽章、大屏展播、頁面標題 源碼縮略圖和警告框 思維導圖所屬章節：縮略圖和警告框 思維導圖縮略圖和警告框 源碼所屬章節：縮略圖和警告框 源碼進度條和媒體對象 思維導圖所屬章節：進度條和媒體對象 思維導圖進度條和媒體對象 源碼所屬章節：進度條和媒體對象 源碼Js選項卡 課件所屬章節：Js選項卡 課件工具提示框 課件所屬章節：工具提示框 課件 彈出框與警告框 課件所屬章節： 彈出框與警告框 課件折疊效果 課件所屬章節：折疊效果 課件 焦點輪播圖 課件所屬章節： 焦點輪播圖 課件 Js選項卡 源碼所屬章節： Js選項卡 源碼工具提示框 源碼所屬章節：工具提示框 源碼彈出框與警告框 源碼所屬章節：彈出框與警告框 源碼折疊效果 源碼所屬章節：折疊效果 源碼焦點輪播圖 源碼所屬章節：焦點輪播圖 源碼
免費領取價值1888元求職寶典！
客服熱線 400-862-8862
回到頂部
