HTML5 + Bootstrap Study Notes 2, html5bootstrap

HTML5 + Bootstrap Study Notes 2, html5bootstrap

Navbar upgrade from Bootstrap 2 to Bootstrap 3

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

2. <ul class = "nav"> the strain is <ul class = "nav navbar-nav">.

References:

CSS display: table attribute usage parsing 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

The mobile browser places the page in a virtual "window". Generally, this virtual "window" is wider than the screen, in this way, you do not need to squeeze each webpage into a small window (this will damage the layout of the webpage that is not optimized for the mobile browser). You can view different parts of the webpage through translation and scaling. The mobile Safari browser recently introduced the meta tag viewport, which allows web developers to control the size and scaling of viewport. Other mobile browsers also support the meta tag.

 

The viewport meta tag of a commonly used page optimized for a mobile webpage is roughly as follows:

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

Width: controls the viewport size. You can specify a value. If it is 600 or a special value, for example, if device-width is the width of a device, the unit is the CSS pixel when the unit is 100% ).
Height: corresponds to width and specifies the height.
Initial-scale: the initial scale, that is, the scale when the page is loaded for the first time.
Maximum-scale: the maximum scale that users can scale.
Minimum-scale: minimum scale that allows users to scale.
User-scalable: whether the user can manually Scale

References:

HTML meta viewport attribute description http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

Deep understanding of viewport in Mobile front-end development http://www.cnblogs.com/2050/p/3877280.html

Understand the http://www.xiaocaoge.com/understanding-viewport-and-device-width.html of viewport and device-width? Utm_source = tuicool

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