Bootstarp:是基于HTML、CSS、JAVASCRIPT的前端框架(半成品),在jquery的基础工作(jQuery务必在bootStrap.mai.js之前引入),可以理解为Bootstrap就是jquery的一个插件,用于响应式布局(可以兼容多个设备(即终端))与移动设备优先的web项目
网站中有现成的插件、组件、全局css样式、定制与网站实例
编写时去寻找导航栏等写好的模版就行修改即可(不需要row容器,若是类容很少也可以不写row容器):
导航栏:在组件中导航条中
图片轮播:插件的crouse里面
若类容有两个及以上最好写在row容器里面,便于分配占比以及设置xs、sm、md、lg的显示效果
模版:
<!--导入Bootstrap的dist文件夹,并导入jquery.js文件-->
<!--要用到任何组件就去文档里面找-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明兼容性-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- 1:该Bootstrap路径 -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- 2:改jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- 3::Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</head>
<body>
<!--.container与.container-fluid容器-->
<div class="container">
...
</div>
<div class="container-fluid">
...
</div>
<div>
...
</div>
</body>
</html>
栅格系统:响应式、移动设备优先。随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
注意:行必须放到两种容器中去
xs:超小屏幕(手机<768px) sm:小屏幕(平板>=768px) md:中等屏幕(桌面>=992px) lg:大屏幕(>=1200px)
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 clo-xs-6">
</div>
<div class="col-lg-4 hideen-xs">
</div>
<div class="col-lg-4 col-xs-6">
</div>
</div>
</div>
</body>
样式设置class=“” bootstrap框架几乎都已经写好了,直接使用即可