BootStrap

发布时间：2020-12-17 20:56:43 所属栏目：安全来源：网络整理

导读：一、概念 BootStrap是基于HTML、CSS、JavaScript的前端框架，定义一套CSS样式和JQuery代码，我们按照HTML结构，添加class样式，就可以实现响应的效果 BootStrap 是JQuery的一个插件实现响应式布局：根据不同终端适应不同场景二、标准模板 htmlhead!--设置

一、概念

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插件。里面的很多功能我们可能不知道怎么完全写出来，就先读懂代码，然后修改，不断进步。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!