bootstrap学习

来源：互联网发布：常见电信网络诈骗试题编辑：程序博客网时间：2024/04/30 08:29

一、环境挞建
1.下载生产环境
2.引入css/js文件

        <link href="css/bootstrap.min.css" rel="stylesheet" />        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>

二、Less快速入门
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。(略过先不看了，先知道干嘛的就行。)

三、bootstrap的css概念
1.移动设备优先:需要在head中添加一个viewport的meat

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width 属性控制设备的宽度。置为 device-width确保正确呈现在不同设备上。
initial-scale=1.0网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
user-scalable=no禁用其缩放（zooming）功能。
maximum-scale=1.0 与 user-scalable=no一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

四、网格(Grid)
行必须放置在 .container class 内
使用行来创建列的水平组
内容应该放置在列内，且唯有列可以是行的直接子元素
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4(最多一行显示12列)
列Class前缀:col-xs- 手机(<768px),col-sm- 平板(>=768px),col-md- 台式(>=992px),col-lg- 台式(>=1200px)

例子1：

    <style>        div {text-align:center;}        .col-lg-1 {background-color:#f00;}        .col-lg-2 {background-color:#0f0;}        .col-lg-3 {background-color:#00f;color:#fff}        .col-lg-4 {background-color:#f0f;}        .col-lg-6 {background-color:#000;color:#fff}        .col-lg-12 {background-color:#0ff;}    </style>    <div class="container">        <div class="row">            <div class="col-lg-1 col-xs-1">111</div>            <div class="col-lg-1 col-xs-1">222</div>            <div class="col-lg-1 col-xs-1">333</div>            <div class="col-lg-1 col-xs-1">444</div>            <div class="col-lg-1 col-xs-1">555</div>            <div class="col-lg-1 col-xs-1">666</div>            <div class="col-lg-1 col-xs-1">777</div>            <div class="col-lg-1 col-xs-1">888</div>            <div class="col-lg-1 col-xs-1">999</div>            <div class="col-lg-1 col-xs-1">000</div>            <div class="col-lg-1 col-xs-1">111111</div>            <div class="col-lg-1 col-xs-1">121212</div>        </div>        <div class="row">            <div class="col-lg-2 col-xs-2">111</div>            <div class="col-lg-2 col-xs-2">222</div>            <div class="col-lg-2 col-xs-2">333</div>            <div class="col-lg-2 col-xs-2">444</div>            <div class="col-lg-2 col-xs-2">555</div>            <div class="col-lg-2 col-xs-2">666</div>        </div>        <div class="row">            <div class="col-lg-3 col-xs-3">111</div>            <div class="col-lg-3 col-xs-3">222</div>            <div class="col-lg-3 col-xs-3">333</div>            <div class="col-lg-3 col-xs-3">444</div>        </div>        <div class="row">            <div class="col-lg-4 col-xs-4">111</div>            <div class="col-lg-4 col-xs-4">222</div>            <div class="col-lg-4 col-xs-4">333</div>        </div>        <div class="row">            <div class="col-lg-6 col-xs-6">111</div>            <div class="col-lg-6 col-xs-6">222</div>        </div>        <div class="row">            <div class="col-lg-12 col-xs-12">111</div>        </div>    </div>

具体的各控件class用法参照：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

0 0