您的位置：首页 > Web前端 > BootStrap

BootStrap

2017-01-11 16:26 232 查看

一、概念

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插件。里面的很多功能我们可能不知道怎么完全写出来，就先读懂代码，然后修改，不断进步。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航