bootstrap笔记-bootstrap实际运用 旧城等待， 2022-09-26 00:23 142阅读 0赞 这两天一直在看bootstrap，许多教程都着重于介绍boostrap的原理、CSS 概览、组件等，然而对项目中具体怎么使用却没有涉及，对此作为新手的我倍感心累，幸运的是看了一篇博客，瞬间改变了我的处境。不论怎样，都把这篇参考的博客贴在后面，以示感谢！ 一、bootstrap准备工作 1、下载boostrap 地址：*http://getbootstrap.com/* 打开页面后，选择“Download Bootstrap”，即可下载用于直接生产的bootstrap。 2、解压并放入项目 1）、解压 解压后的文件夹内可看到三个字文件夹： css：里面有两类文件（.css与.map）。关于.map文件，可以参看：*http://www.cnblogs.com/zxyun/p/4431416.html* font：存放一些bootstrap中的字体信息和SVG 图形等数据。 js：存放了所有的可能需要的JavaScript。如果足够熟悉bootstrap，则使用bootstrap时不必引用全部js，选择性的使用用到的就ok。 2）、引用 将上面的三个文件夹拷入将要进行的项目即可。如： ![Center][] 二、使用bootstrap进行工作 1、引入基本html模板：*http://bootstrap.evget.com/getting-started.html* <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js 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="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html> 注意：上面的代码已经将<link>与<script>内的文件改为了本地项目的文件。各教程中使用的是网站上的文件。 2、使用组件模板 参看一个较好的中文网站：*http://bootstrap.evget.com/components.html* 1）、假设页面中需要一个导航的标签页，在该网站上找到相应的组件： ![Center 1][] 说明：每个模板后面都注释了该模板需要的JavaScript插件。 2）、将模板（此即ul标签块）复制进项目页面中 3）、将需要的其它html元素引入 如此处不仅有<ul>的标签页，还应有标签页对应的每个子页面，对此该模板所需的JavaScript插件说明页后面会有相应的添加方法： <!-- Nav tabs --> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home">...</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div> 将此模板复制进项目需要的地方（如果需要可进行相应的样式调整，如修改宽高等），进行内容调整。 4）、完成 最终的结果： <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <div class="myClass"> <ul class="nav nav-tabs"> <li class="active" ><a href="#home" data-toggle="tab">Home</a></li> <li ><a href="#profile" data-toggle="tab">Profile</a></li> <li ><a href="#messages" data-toggle="tab">Messages</a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane active" id="home">home页面</div> <div class="tab-pane" id="profile">profile页面</div> <div class="tab-pane" id="messages">messages页面</div> </div> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> 效果： ![Center 2][] 再次附上前面提到的bootstrap中文网站：*http://bootstrap.evget.com/Index.html* 参考博客：*http://blog.csdn.net/codebycoder/article/details/51001256* [Center]: /images/20220717/20265478c5f04b1f8db5ed727e187901.png [Center 1]: /images/20220717/668b207e43d74adabfd23d5a481e3812.png [Center 2]: /images/20220717/83add793307e4343914d16abf423c069.png
还没有评论，来说两句吧...