BootStrap学习

来源：互联网发布：js怎样仿写shift 编辑：程序博客网时间：2024/05/18 03:31

BootStrap：全局css样式、组件、JavaScript插件。

首先，引入事先做好的css文件、fonts文件、js文件。

【栅格系统代码库】：

在title上面写：

<!-- 根据设备宽度，调整缩放比例 --><meta name="viewport" content="width=device-width, initial-scale=1">

在title下面写：

<!-- 引入BootStrap的CSS --><link rel="stylesheet" href="../../css/bootstrap.min.css" /><link rel="stylesheet" href="../../css/bootstrap-theme.min.css" /><!-- 引入JS--><script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="../../js/bootstrap.min.js" ></script>

min版本是压缩版的。

【整体代码】

<!DOCTYPE html><html><head><meta charset="UTF-8"><!--        作者：2782348490@qq.com        时间：2016-12-05        描述：根据设备宽度，调整缩放比例        --><title>栅格系统</title><!--        作者：2782348490@qq.com        时间：2016-12-05        描述：引入Bootstrap的css        -->        <link rel="stylesheet" href="../css/bootstrap.min.css" />        <link rel="stylesheet" href="../css/bootstrap-theme.min.css" />        <!--        作者：2782348490@qq.com        时间：2016-12-05        描述：引入Bootstra的js文件        -->        <script type="text/javascript" src="../js/bootstrap.min.js" ></script>        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>        <!--        作者：2782348490@qq.com        时间：2016-12-05        描述：div的style风格：边界一像素，灰色边框        -->        <style>        div{        border: 1px solid gray;        }        </style></head><body><!--        作者：2782348490@qq.com        时间：2016-12-05        描述：栅格系统代码,他们必须首先放在div类为container的容器中，列数为12        -->        <div class="container">        <div class="row"><div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div></div><div class="col-md-8"><div class="row"><div class="col-md-3">222</div><div class="col-md-3">222</div><div class="col-md-3">222</div><div class="col-md-3">222</div></div></div><div class="col-md-2">111</div><div class="col-md-1">111</div><div class="col-md-1">111</div>        </div>                <div class="container">        <div class="row">        <div class="col-md-3 col-sm-6 col-xs-12">        <h1>关于我们</h1>        <p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>        </div>        <div class="col-md-3 col-sm-6 col-xs-12">        <h1>友情链接</h1>        <p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>        </div>        <div class="col-md-3 col-sm-6 col-xs-12">        <h1>社会动态</h1>        <p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>        </div>        <div class="col-md-3 col-sm-6 col-xs-12">        <h1>心情札记</h1>        <p>秋日，收获的歌，静秋，蓝天一般的灿烂。轻轻道一声：秋日安好!远方的你亦安好如初!此刻，我仿佛听见窗外的风呢喃着心事，九月天的浪漫，正踏过我的指尖，一幅生命的静美图，在灯火阑珊的夜，温暖而璀璨地铺展开来。</p>        </div>        </div>        </div>        </body></html>

1、带row和不带row的区别：

<div class="container">        <div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div>        </div>

<div class="container">        <div class="row"><div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div><div class="col-md-3">111</div></div>        </div>

2、样式：

0 0