首页 > 代码库 > 有关bootstrap

有关bootstrap

最近在接触对移动浏览器很友好的bootstrap,遂整理了一点笔记:

简单的html页面:

<!DOCTYPE html><html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

  </body></html>

 

Bootstrap依赖于jquery,所有的javascript插件都依赖已jquery

解压后的目录结构:

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    └── glyphicons-halflings-regular.woff

 

1.为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签。

<meta name=’viewport’ content=’width=device-width, initial-scale=1.0’>

2.在移动设备浏览器上通过为viewport meta 标签添加 user-scalable=no禁用其缩放功能。

3.响应式图片:通过添加 .img-responsive class可以让图片对响应式布局的支持更友好,其实质是为图片赋予了max-width:100%;heightauto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

4.Containers

 .containers包裹页面上的内容即可实现居中对齐。注意,由于设置了padding和固定宽度,.containers不能嵌套。

 

栅格系统:

Bootstrap内置了一套响应式,移动设备优先的流式栅格系统,随着屏幕设备或视口viewport尺寸的增加,系统会自动分为最多12列,它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

  • “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 使用“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建

!!!注意:栅格与全宽布局Grids and full-width layouts

  对于需要占据整个浏览器视口的页面,需要将内容区域包裹在一个容器的元素内,并且赋予padding0 15px ;为的是抵消为.row 所设置的 margin0 -15px;(如果不这样的话,页面会左右超出视口15px,压面底部出项横向滚动条。)

 

:未完待续

有关bootstrap