search

Home >Web Front-end >HTML Tutorial >HTML5 Bootstrap study notes 2_html/css_WEB-ITnose

HTML5 Bootstrap study notes 2_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:45:331077browse

navbar upgrade from Bootstrap 2 to Bootstrap 3

1. .navbar-inner has been removed from Bootstrap 3.

2.

    should become
      .

      Reference materials:

      CSS display:table attribute usage analysis http://developer.51cto.com/art/201009/226678.htm

      Twitter Bootstrap 3 - Navbar not horizontal http://stackoverflow.com/questions/18191177/twitter-bootstrap-3-navbar-not-horizontal

      Bootstrap navbar http://getbootstrap.com/components/# navbar

      viewport

      Mobile browsers place the page in a virtual "window" (viewport). Usually this virtual "window" (viewport) is smaller than The screen is wider so that instead of squeezing each web page into a tiny window (which would break the layout of web pages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the web page. The mobile version of Safari browser recently introduced the viewport meta tag, which allows web developers to control the size and zoom of the viewport. Other mobile browsers also basically support it.

      A commonly used viewport meta tag for a page optimized for mobile web pages is roughly as follows: 

      1 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

      width: controls the size of the viewport , you can specify a value, such as 600, or a special value, such as device-width, which is the width of the device (units are CSS pixels when scaling to 100%).
      Height: Corresponding to width, specify the height.
      initial-scale: The initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time.
      maximum-scale: The maximum scale the user is allowed to zoom to.
      minimum-scale: The minimum scale to which the user is allowed to zoom.
      user-scalable: whether the user can manually zoom

      Reference materials:

      HTML meta viewport attribute description

      viewport for mobile front-end development In-depth understanding

      Understanding viewport and device-width http://www.xiaocaoge.com/understanding-viewport-and-device-width.html?utm_source=tuicool

      Twitter Bootstrap: Responsive CSS does not work on mobile devices (solve the problem that Bootstrap mobile terminal cannot respond) http://julienrenaux.fr/2013/03/01/twitter-bootstrap-responsive-does-not-work-on-mobile-devices/

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to add meta name="viewport" in HTML to control the page not to be deformed when it is zoomed in or out_html/css_WEB-ITnoseNext article：How to add meta name="viewport" in HTML to control the page not to be deformed when it is zoomed in or out_html/css_WEB-ITnose

Related articles

See more