簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載)

摘要:簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載) -- 響應式網頁 / 自適應網頁(Responsive Web)設計

因為VS 2013搭配 Bootstrap v3.0.0版,有些CSS的名稱略有修改。
原廠文件有提供一份列表說明,非常清楚。




 

 

建議您完成上一篇文章的教學,再來看下去。

 

 

 

因為VS 2013搭配 Bootstrap v3.0.0版,有些CSS的名稱略有修改。

原廠文件有提供一份列表說明,非常清楚。

 

我把上一篇文章的範例(for 2.3.2版)

轉成 Bootstrap 3.0.0版時需要更動的重點,用黃底色來註明。

 

資料來源:http://getbootstrap.com/getting-started/#migration

=================================================================================

Reference table for classes that have changed between v2.x and v3.0.

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.visible-phone .visible-sm
.visible-tablet .visible-md
.visible-desktop .visible-lg
.hidden-phone .hidden-sm
.hidden-tablet .hidden-md
.hidden-desktop .hidden-lg
.input-small .input-sm
.input-large .input-lg
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.thumbnail .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline

What's new

We've added a few new elements and changed some existing ones. Here's their new or updated classes.

Element Description
Panels .panel .panel-default .panel-body .panel-title .panel-heading.panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Tiny grid (<768 px) .col-xs-*
Small grid (>768 px) .col-sm-*
Medium grid (>992 px) .col-md-*
Large grid (>1200 px) .col-lg-*
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
Responsive images .img-responsive
Contextual table rows .success .danger .warning .active
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link

What's removed

The following elements have been dropped or changed in v3.

Element Removed from 2.x 3.0 Equivalent
Form actions .form-actions N/A
Search form .form-search N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Navbar inner .navbar-inner N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A

Additional notes

We've made many underlying changes in v3 that are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.

  • Text-based form controls are now 100% wide. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .container and .row are now fluid (percentage-based).
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. They also require a base and icon class (e.g..glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header.modal-body, and .modal-footersections now get wrapped in .modal-content and .modal-dialog for improved mobile styling and behavior.
  • JavaScript events are namespaced. For example, to handle the modal "show" event, use'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc..

=================================================================================

 

 

我是一個沒有學過 CSS與 jQuery的人

只接觸過簡單的  HTML標籤與網頁、有寫過簡單的 JavaScript

(基礎接近於零)

 

但我把文章看過一次,把範例放到 ASP.NET裡面看看成果,就知道該怎麼下手了

(不要在「」了!要動手做~)

 

 

範例下載 for Bootstrap 3.0.0

         Book_Samples_BootStrap 3.0.0.rar

 

  WebSite2013_Bootstrap 3.2.0.rar   

  請參閱  http://getbootstrap.com/examples/theme/ 

 


 

我之前參閱了這本書,吸收得比較順暢 -- [好書推薦]簡體中文 -- Implementing Responsive Design(響應式Web設計實踐)

知識,因為 分享 而偉大

更多說明與範例,請參閱  正體中文版  Bootstrap (v2.3.2)網站   (http://kkbruce.tw/)

 

相關文章:

 
......我該寫一份 Mobile APP 或是 套用網頁(改成 響應式網頁)就好呢???
 
 

 

 

 

下一篇文章:幫您的VS 2012 /2013安裝智慧手機模擬器(iOS / Android),來瀏覽畫面

    

 

 

 
.......................以下是廣告........................................................................................
 
我的書、我的課程,絕對沒有太多招數
 
都是用最基本的技巧
組合成各種變化。
 
如同詠春拳,三個套路,
排列組合、變化萬千
 
 
 
 
 
與其到處  Copy範例、到處抄襲程式碼(找到了也改不動)
 
為什麼不一次學好、學清楚?
 
然後讓自己有生產力呢?
(你學了一百招,但上了戰場,一招都使不出來?)
(客戶的要求,沒有一個你能自己做到?還是上網逐一發問、抄抄改改?)
 
 
為什麼人家可以千變萬化?
 
我只能到處拼拼湊湊?卻還天天加班、做不完?最後還是迷迷糊糊?
 
 
 
 
   如何一以貫之
         如何啟動「輕輕鬆鬆的自我學習之道」?
 
 
讓我告訴你,
一個沒有大型補習班招牌、沒有關鍵字廣告的書籍與課程
 
 
在時局這麼亂、經濟與工作越來越蕭條的  Bumbler 無能年代
 
為何所有補習班的 ASP.NET課程都開不成、招不到學生
我的課程,班班額滿,欲罷不能.............縱貫這三四年 全台灣 的 ASP.NET入門教學
 
 
 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課