响应式布局之Bootstrap

  • 了解Bootstrap
  • Bootstrap CSS、组件 JavaScript插件
  • 使用Bootstrap
  • 下载地址:Bootstrap

了解Bootstrap

响应式布局之Bootstrap_第1张图片
bootstrap.png

CSS、组件 JavaScript插件
使用Bootstrap

可以在官网看CSS以及组件,JavaScript,里面 有代码示例




    
    Bootstrap
    
    



.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example block-level help text here.

效果图:

响应式布局之Bootstrap_第2张图片
Bootstrap.png

响应式布局使用Bootstrap

看一个官网的例子:

响应式布局之Bootstrap_第3张图片
例子1.png

效果图:

响应式布局之Bootstrap_第4张图片
例子2.png



    
    Title
    


    
    

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

Heading

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 details »

Heading

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 details »

Heading

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 details »


©Company 2014

根据官网的例子,修改些许代码实现上述效果;使用Bootstrap框架会自动成为响应式布局

响应式效果图.gif

你可能感兴趣的:(响应式布局之Bootstrap)