BootStrap

来源：互联网发布：win10仿linux主题编辑：程序博客网时间：2024/06/05 08:06

一、概念

BootStrap是基于HTML、CSS、JavaScript的前端框架，定义一套CSS样式和JQuery代码，我们按照HTML结构，添加class样式，就可以实现响应的效果

BootStrap是JQuery的一个插件

实现响应式布局：根据不同终端适应不同场景

二、标准模板

<html><head><!--设置编码--><meta charset="utf-8"><!--兼容IE-->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!--    name="viewport" 移动视口    width=device-width 采用移动终端的屏幕    initial-scale=1 初始化大小 1=100%    minimum-scale=1 缩小的最小比例 100%    maximum-scale=1 变大的最大比例 (最大值5)    user-scalable=no 是否允许缩放    -->    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale-1,maximum-scale=1,user-scalable=no"><title></title><!--        1.导入css文件        2.导入jquery类库        3.导入boostrap类库        -->        <link rel="stylesheet" href="../css/bootstrap.css" />        <script type="text/javascript" src="../js/jquery-1.11.3.js" ></script>        <script type="text/javascript" src="../js/bootstrap.js" ></script></head><body></body></html>

视口：用于设置移动浏览器显示效果，当页面宽度超过了设备，浏览器内部虚拟一个页面容器将页面容器缩放到设备这么大，然后显示。

三、容器

<body><!--container:页面两边留白container-fluid:100%填充--><div class="container-fluid" style="height: 200px;border:1px solid red;"></div></body>

四、栅格系统

栅格系统：Bootstrap提供了一套响应式、移动设备优先的栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

特点：行row必须包含在.container中：.row

列column可以作为行row的直接子元素：col-*-*

参数：large：lg medium：md small：sm xsmall：xs

默认列为12列，若列大于12时，则另起一行排列

流式操作：当后面无法继续存放时，另起一行排列

<div class="container"><!--作为行的直接子元素--><div class="row">        <!--lg时每列占4格   sm时每列占2格--><div class="col-lg-4   col-sm-2" style="height:100px;border: 1px solid red;">                </div><div class="col-lg-4   col-sm-2"  style="height:100px;border: 1px solid red;">                </div>         </div> </div>

显示：visible-* 隐藏hidden-*

<div class="container"><div class="row"><!--只显示lg时：visible-lg  --><div class="col-lg-3 col-md-4 col-lg-2 visible-lg" style="height: 100px;border: 1px solid red;"></div></div></div>

五、按钮Class

<body><button type="button" class="btn btn-default ">Default</button><button type="button" class="btn btn-primary ">Primary</button><button type="button" class="btn btn-success btn-lg ">Success</button><button type="button" class="btn btn-info ">Information</button><button type="button" class="btn btn-warning ">Warning</button><button type="button" class="btn btn-danger ">Danger</button><button type="button" class="btn btn-link ">LInke</button></body>

显示如下：

六、小知识

class="list-inline"：去除列表中的block属性，按照行排列

导航条：<nav class="navbar navbar-inverse"></nav> navbar-inverse：颜色反过来

内容居中：<div class="col-lg-6 text-center" ></div>

小结：Bootstrap包含了丰富的Web组件，可以迅速搭建美观、功能性强的网站，同时自带JQuery插件。里面的很多功能我们可能不知道怎么完全写出来，就先读懂代码，然后修改，不断进步。

0 0