Shulou(Shulou.com)06/03 Report--

Editor to share with you what the layout of bootstrap, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

What is the layout of bootstrap?

Bootstrap has a fixed layout and a mobile layout: a fixed layout is to create a web page based on a fixed number of pixels or an app; flow layout is to create a non-fixed layout, that is, a percentage-based layout to make the layout more flexible.

Bootstrap fixed layout

If you want to create a web page or app based on a fixed number of pixels, see this section of the tutorial.

Usage

...

explain

Lines 261 to 273 of bootstrap.css (located under docs\ assets\ css in the home folder of bootstrap) create a master container rendering style, thus creating a fixed layout. The purpose of a fixed layout is to create a 940 pixel wide (default) layout for a web page or app.

An instance of Bootstrap fixed layout

The following code creates a fixed layout for a web page. To customize, in addition to the default style, you need to create a new css file, example-fixed-layout.css, in the same folder as bootstrap.css.

CSS code

Body {padding-top: 60pxport paddingsway bottom: 40px;}. Nav li {padding-top: 5px;}. Leaderboard {padding: 60pxash Marvelyn bottom: 30pxpolitics backgroundMurray: url ('/ twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat;-webkit-border-radius: 6pxtachem Mozmuri radius: 6pxbordersway radius: 6px;} .leaderboard H2 {font-size: 40pxtransverinbottom: 5pxwords height: 1position letterspace:-1pxscape colorway floor FF6600 }. Leaderboard p {font-size: 18pxmistfontkowweight: 200 linewayheight: 27px;} HTML code examples using instances of Bootstrap version 2.0 fixed layout

Home About Contact w3cschool Web Store

Try and purchase HTML5, JS, Ruby, PHP-MySQL based web apps to enhance your productivity at affordable price.

Sign Up for a 30 day free trial

HTML5 and JS Apps

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View apps

Ruby Apps

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View apps

PHP MySQL Apps

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View apps

©Company 2012

Output

View the above example in different browser windows.

Bootstrap flow layout

If you want to create a non-fixed layout, that is, a percentage-based layout to make the layout more flexible, see this section of the tutorial.

Usage

explain

Lines 274 to 285 of bootstrap.css (located under docs\ assets\ css in the home folder of bootstrap) to create a master container rendering style, thus creating a flowing layout. The purpose of a mobile layout is to create a percentage-based layout for a web page or app (for example, width=20%).

An example of Bootstrap flow layout

The following code creates a web page flow layout. To customize, in addition to the default style, you need to create a new css file, example-fluid-layout.css, in the same folder as bootstrap.css.

CSS code

Body {padding-top: 60px; padding-bottom: 40px;} .nav li {padding-top: 5px;} .sidebar-nav {padding: 9px 0;} .leaderboard {padding: 60px; margin-bottom: 30px; background-image: url ('/ twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat;-webkit-border-radius: 6px -moz-border-radius: 6px; border-radius: 6px;}. Leaderboard H2 {font-size: 40px; margin-bottom: 5px; line-height: 1; letter-spacing:-1px; color:#FF6600;}. Leaderboard p {font-size: 18px; font-weight: 200; line-height: 27px;}. Well {background-image: url ('/ twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat;-webkit-border-radius: 6px -moz-border-radius: 6px; border-radius: 6px;}. Nav. Nav-header {font-size: 18pxcolorposition instance FF9900;} HTML code instance using Bootstrap version 2.0 fixed layout instance

Home About Contact Logged in as username

Frontend HTML 4.01 HTML5 CSS JavaScript Twitter Bootstrap Firebug Backend PHP SQL MySQL PostgreSQL MongoDB Learn. Practice. Develop.

W3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.

Join w3cschool now

Learn

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Start Learning now

Practice

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Start percticing now

Develop

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Start developing now

©Company 2012

The above is all the content of this article "what is the layout of bootstrap?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.