bootstrap簡介
課程目標了解Bootstrap注意:在學習這門課程之前,大家最好已經學習過了 HTML、CSS、JAVASCRIPT這些內容。Bootstrap簡介Bootstrap 是最受歡迎的 HTML、CSS 和 JS框架,用于開發響應式布局、移動設備優先的 WEB 項目,由Twitter于2011年8月在G... 查看原文
Bootstrap是由Twitter發布一款目前最受歡迎的前端框架。Bootstrap基于 HTML、CSS、JAVASCRIPT的,它簡潔靈活,將常見的CSS布局、常用組件和JavaScript插件進行了完整并完善的封裝,能讓沒有經驗的前端工程師和后端開發工程師都迅速掌握和使用,大大提高開發效率,它還在某種程度上規范前端團隊編寫CSS和JavaScript的規范。總之學習Bootstrap可以讓你很輕松開發出響應式的WEB項目。
32章節|184319次播放
課程目標了解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,因為這是需要它對小圖標進行定位。然后我們需要... 查看原文