Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strike>Bootstrap 3 is not officially released yet, but you can download the latest code from <a href="https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip" rel="nofollow noreferrer">https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip</a>. You could also compile the docs to check for differences, see: <a href="https://stackoverflow.com/questions/15318984/compile-twitter-bootstrap-3-docs-how-to/16318336">Compile Twitter bootstrap 3 docs (How to)?</a>.</strike></p> <p><a href="http://twitter.github.io/bootstrap/" rel="nofollow noreferrer">Bootstrap 3 RC1</a> has been release now.</p> <p>Twitter's Bootstrap 3 will not be backwards compatible with version 2 so migration will always be painful in some way.</p> <p>Twitter's Bootstrap 3 will have a fluid grid (by default) so it will help to build your version 2 templates with a fluid layout too. Other important changes are:</p> <ul> <li>TB3 will be mobile first</li> <li>No support for IE7 and Firefox 3.x</li> <li>No separate responsive CSS file.</li> </ul> <p>Read also: <a href="http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/" rel="nofollow noreferrer">http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/</a></p> <p>I like your idea of making a mixin for migration. Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (&lt;480px), Small grid for Tablets (&lt;768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).</p> <p>Twitter’s Bootstrap 2 defines breakpoints at 480px, 768px, 980px and 1200px. The layout will always be fluid below 768px.</p> <p>For this reason the 'old' <code>span*</code> will not be the same as <code>col-*</code> or <code>col-lg-*</code>. So replacing the class names in your templates will be give you better results. But when looking to an example like <a href="http://examples.getbootstrap.com/jumbotron/index.html" rel="nofollow noreferrer">http://examples.getbootstrap.com/jumbotron/index.html</a> you will find the the <code>col-lg-*</code> class in place of the former <code>span*</code> class. This will give you a possibility to create a mixin for span* with the same styles as col-lg-* in this case.</p> <h2>Responsive features</h2> <p>When you start migrate you also have to decide to use the responsive features or not. Bootstrap 3 don't have a separate responsive CSS file any more.</p> <p><strong>No responive features</strong> Who don't want to have the responive features has to use the “.col-” prefix for your row classes. This grid will never stack. You also will have to set the grid-float-breakpoint to 0. When using Less the @grid-float-breakpoint will be defined in variables.less. Keep in mind other parts like forms and modals also use the @grid-float-breakpoint. See also: <a href="http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/" rel="nofollow noreferrer">http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/</a></p> <p><strong>With responive features</strong> In most cases you will use the responsive features. When migration you have to choose between the “.col-sm-” and “.col-lg-” to replace your old “span“ prefixes. The “col-lg-” as told above will give you most likely the same behavior as before. “col-lg-” will stack below the 768px. Also in this case consider the grid-float-breakpoint. The grid-float-breakpoint is 768px by default.</p> <p><strong>Note</strong>: at the moment TB2.3.2. has been replaced with Bootstrap 3 RC1 on the main site. So consider to start with TB3 from start. See also <a href="http://examples.getbootstrap.com/grid/" rel="nofollow noreferrer">http://examples.getbootstrap.com/grid/</a> for more examples of the grids.</p> <h2>Related questions and more:</h2> <ul> <li><a href="https://stackoverflow.com/questions/17932509/images-not-responsive-by-default-in-twitter-bootstrap-3-0-rc1/17933207#17933207">Images not responsive by default in Twitter Bootstrap 3?</a></li> <li><a href="https://stackoverflow.com/questions/17919225/new-twitter-bootstrap-3-grid-changing-breakpoint-and-removing-padding/17920693#17920693">Twitter&#39;s Bootstrap 3 grid, changing breakpoint and removing padding</a></li> <li><a href="https://stackoverflow.com/questions/17575687/bootstrap-3-0-modal/17580867#17580867">Bootstrap 3.0 Modal</a></li> </ul> <p>Also read this <a href="https://stackoverflow.com/a/17977432/1596547">https://stackoverflow.com/a/17977432/1596547</a> answer from <a href="https://stackoverflow.com/users/171456/skelly">@skelly</a> it provide two useful links:</p> <p><a href="http://bootply.com/bootstrap-3-migration-guide" rel="nofollow noreferrer">http://bootply.com/bootstrap-3-migration-guide</a></p> <p>A Bootstrap migration tool in the works: <a href="https://github.com/iatek/bootstrap-migrate" rel="nofollow noreferrer">https://github.com/iatek/bootstrap-migrate</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload