老11选5规则 > 課程庫 > bootstrap入門
bootstrap入門

老11选5遗漏:bootstrap入門

Bootstrap是由Twitter發布一款目前最受歡迎的前端框架。Bootstrap基于 HTML、CSS、JAVASCRIPT的,它簡潔靈活,將常見的CSS布局、常用組件和JavaScript插件進行了完整并完善的封裝,能讓沒有經驗的前端工程師和后端開發工程師都迅速掌握和使用,大大提高開發效率,它還在某種程度上規范前端團隊編寫CSS和JavaScript的規范。總之學習Bootstrap可以讓你很輕松開發出響應式的WEB項目。

32章節|180804次播放

  • bootstrap

    bootstrap簡介

    課程目標了解Bootstrap注意:在學習這門課程之前,大家最好已經學習過了 HTML、CSS、JAVASCRIPT這些內容。Bootstrap簡介Bootstrap 是最受歡迎的 HTML、CSS 和 JS框架,用于開發響應式布局、移動設備優先的 WEB 項目,由Twitter于2011年8月在G... 查看原文

  • bootstrap

    bootstrap安裝配置

    下載Bootstrap打開官方網站//getbootstrap.com/,點擊Download Bootstrap。1) 下載用于生產環境的文件2) 下載用于編譯css的Less源碼及插件的js源文件3) 下載用于編譯css的Lass源碼及插件的js源文件4) Bootstrap文件結構其... 查看原文

  • bootstrap

    Bootstrap柵格系統原理

    Bootstrap柵格系統布局1、柵格系統簡介1)響應式設計我們現實生活中所使用到的設備有手機、平板電腦、筆記本、臺式機。這些設備最大的區別在于它的屏幕的大小不一樣,也就是分辨率大小不一樣。響應式設計最核心的思想是就一個網站能夠兼容多個終端,而不是為每個終端特定的一個版本。頁面的設計與開發應當根據用... 查看原文

  • bootstrap

    柵格布局基本用法

    1.1布局容器1)新建demo02.html文件,定義一個container容器,我們看container幫我們做了哪些事情。2)運行一下,首先是把這個div是居中的。3)當瀏覽器變小的時候,它基本上就全屏了。4)也就是bootstrap幫我們定義一個container這樣一個樣式,containe... 查看原文

  • bootstrap

    bootstrap柵格參數

    跨設備組合定義定義一行,在中等分辨率下是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-... 查看原文

  • bootstrap

    bootstrap禁止響應布局

    刪除viewpt的meta? ? 要禁止響應布局很簡單,第一步把移動設備優先刪掉<meta name="viewport" content="width=device-width, initial-scale=1">為.container設為固定寬度然后直接用id運行結果:這就是我們傳統的外文模式。... 查看原文

  • bootstrap

    Bootstrap排版前基礎

    排版前的基礎1.HTML5文檔類型<!DOCTYPE html><html>? ?<head>? ?<meta charset="utf-8">? </head>? <body></body></html>2.移動設備優先<meta name="viewport" content="width=de... 查看原文

  • bootstrap

    Bootstrap排版之標題

    1.定義標題樣式2.運行效果3.定義4.運行效果,表面上看是差不多的,但其實你看這兩個的源代碼,第二種樣式是沒有定義margin-top和 marging-bottom,第一種標簽則定義了margin-top和marging-bottom5.使用small小字體標簽<h1>第一個標題樣式<small... 查看原文

  • bootstrap

    排版之頁面主題

    1.body全局樣式下面這個就是Bootstrap為body設置的全局樣式行body {? font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;//Helvetica Neue代表設置的字體?//設置字體為14px? line-he... 查看原文

  • bootstrap

    排版之文本與縮略語

    強調文本1、強調文本有small、strong、em、cite,對于這些標簽,我們的Bootstrap都給定義了相應的樣式2、標簽應用<small>small</small><em>em</em> ? //em是強調文本<cite>cite url</cite> ? //一般熒幕里引用的網址<b>b... 查看原文

  • bootstrap

    排版之地址與引用

    地址元素address我們的地址在HTML5中增加了一個address標簽,可以把我們的地址寫在address標簽里面,address里面強調換行等等都是可以的。實例:<address>? <strong>Twitter, Inc.</strong><br>? 795 Folsom Ave, Sui... 查看原文

  • bootstrap

    bootstrap列表

    列表分類無序列表2.有序列表3.去點列表 .list-unstyled4.內聯列表 .list_inline5.dl列表6.水平列表dl.dl-horizontal使用列表的具體操作學習如何使用無序列表、有序列表、去點列表、內聯列表、dl列表以及水平列表,具體的操作如下:1)新建一個web項目ch0... 查看原文

  • bootstrap

    bootstrap代碼

    代碼標簽<code>顯示單行內聯代碼2.<kbd>顯示用戶輸入代碼3.<pre>多行代碼塊4.<var>變量5.<samp>程序結果使用代碼操作學習如何使用<code>、<kbd>、<pre>、<var>、<samp>代碼標簽,具體操作如下:1)新建一個demo02.html,將demo01.htm... 查看原文

  • bootstrap

    Bootstrap表格樣式

    Bootstrap表格樣式分類基礎樣式.table2.帶背條紋表格.table-striped3.帶邊框.table-border4.懸停.table-hover5.緊湊.table-condensed6.行樣式 .active .success .info7.響應式表格具體使用操作學習如何使用基礎... 查看原文

  • bootstrap

    Bootstrap基礎表單

    主要內容全局樣式2.form-control3.form-group4.實際操作操作1、新建一個web項目ch062、然后將我們bootstrap用到的css、JavaScript文件導進來。3、在ch06中新建一個demo01.html,接著再打開demo01.html,將移動設備優和css文件先... 查看原文

  • bootstrap

    Bootstrap內聯表單

    實際操作1.新建demo02.html,并將demo01.html復制到demo02.html。2.我們只需在form標簽上加一個form-inline,它就變成內聯表單了<form action="#" method="post" class="form-inline">3.運行效果(在一條水平線... 查看原文

  • bootstrap

    Bootstrap橫向表單

    主要內容在form上應用.form-horizontal2.使用柵格系統3.實際操作操作1、新建一個demo03.html,接著再打開demo03.html,將移動設備優和css文件先導入到頭文件(粘貼過來就行了),保存一下。<meta name="viewport"//移動設備優content="... 查看原文

  • bootstrap

    Bootstrap表單控件

    1.我們切換到bootstrap的中文網,找到被支持的控件。注意“只有正確設置了type屬性的輸入空間才能被賦予正確的樣式”這句話。比如說,要格式化文本,它是這樣格式化的。我們可以通過行和列來指定文本域的寬度。2.表單控件實例2.1textarea在ch06中新建一個demo04.html,在里面添... 查看原文

  • bootstrap

    Bootstrap表單控件狀態

    1.焦點狀態autofocus就是頁面加載完以后它自動獲得焦點。運行效果:2.禁用狀態disabled表示禁用掉的狀態運行效果:3.被禁用的fieldset運行效果,這樣fieldset里面所有的組件就被禁用掉了4.只讀狀態運行效果:讓它獲得焦點時的狀態?</div> <div class=" fo... 查看原文

  • bootstrap

    Bootstrap表單圖標

    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選項卡 源碼
    下載
  • 工具提示框 源碼所屬章節:工具提示框 源碼
    下載
  • 彈出框與警告框 源碼所屬章節:彈出框與警告框 源碼
    下載
  • 折疊效果 源碼所屬章節:折疊效果 源碼
    下載
  • 焦點輪播圖 源碼所屬章節:焦點輪播圖 源碼
    下載
劉慧濤

劉慧濤

TA的課程

潛心鉆研網絡技術10余年,8年軟件開發與網站架構經驗,精通web前端技術、Java EE、B/S結構軟件開發流程與管理,RedCMS開源項目創始人。

免費領取價值1888元求職寶典!

客服熱線 400-862-8862

回到頂部