Bootstrap前端开发案例一
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Bootstrap前端开发案例一
现在很多公司开发中都在使用bootstrap这个框架，bootstrap是Twitter公司的一个团队的作品，大大简化了我们的前端的开发。（后面会总结一些less的使用）
学习使用API我建议直接查看官网的API，地址：
/
下面是部分目标效果图：下面我就总结一个小Demo中的技巧和原理：
第一步、/下载bootstrap的压缩包，新建index.html,使用sublime或其它编辑器打开index页面，解压后目录是
第二步、拷贝官网/getting-started/的一个基本模板，方便后续的开发，<!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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script
src="///html5shiv/3.7.2/html5shiv.min.js"& gt;</script>
<script
src="///respond.js/1.4.2/respond.min.js"& gt;</script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="///jquery/1.11.3/jquery.min.js">< /script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> 1）、注意：jquery.js的引用一定要在bootstrap.min.js的前面，并且最好手动下载一个jquery.js，放在js路径下，<script
src="js/jquery.min.js"></script>
因为后来我在仿真的时候发现下拉和carousel的动画效果都没有了，发现基本模板的jquery文件是下载的，可能没有联网，所以没有下载下来，最好自己引用本地。
2）、注意：css引用放页面上方，js引用放页面下方，因
为css需要先加载渲染页面，而js需要在页面渲染完毕后加载执行；并且适应移动设备的meta语句：<meta
name="viewport" content="width=device-width,
initial-scale=1">第三步、导航条
1）居中效果：container-fluent需要改成container
2）白色改成反差效果的黑色：<nav class="navbar navbar-default navbar-inverse">
3）导航条固定到顶部，增加时类属性：navbar-fixed-top <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle