蓝桥软件学院Bootstrap轻松的行列布局.docxVIP

Bootstrap轻松的行列布局Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。注意其官方描述，实际上boots（Bootstrap简写）是一套html标记、预定义css样式和js插件（增强互动）组成的。直接使用它可以在页面布局、基础ui和样式方面很省心，适合那些不怎么精通前端的程序猿使用。更高阶一点的用法，是自定义boots，即修改它的样式，或者创造自己的组件、插件。（组件和插件是两个不同的概念，前者是标记+css，后者是js实现各种独特效果）。专业的前端攻城狮会参考boots的做法自行设计一套标记、ui、样式，并整合他们喜欢的js库以及插件。作为不怎么精通前端的程序猿，我们先看看怎么直接利用boots来掩饰我们不懂前端的缺点。0.安装（获得boots）访问这个网址下载最新的boots：boots中文网选择下载用于生产环境的或者源码都可以，稍微想自定义一下的，最好下载源码。图1.1解压后能看到这些文件夹和文件：dist是编译整合后的js、css和字体其他目录暂时不要管1.下载HBuilder并创建新Web项目HBuilder下载安装比较简单，此处不表。安装好之后，新建一个Web项目，我的项目名为“bootstrapDemo”，托管在bootstrapDemo，你可以去下载示例源码。2.初始化项目把dist整个目录拷贝到工程根路径下，新建目录01，在01下新建index0.html并拷贝下列内容覆盖index0.html中的内容，以后这个文件会作为我们的最基础的模板：复制!DOCTYPE htmlhtmllang=zh-CNheadmetacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edgemetaname=viewportcontent=width=device-width, initial-scale=1!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --titleBootstrap 101 Template/title!-- Bootstrap --linkhref=css/bootstrap.min.cssrel=stylesheet!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --!-- WARNING: Respond.js doesnt work if you view the page via file:// --!--[if lt IE 9] script src=///html5shiv/3.7.2/html5shiv.min.js/script script src=///respond.js/1.4.2/respond.min.js/script ![endif]--/headbodyh1你好，世界！/h1!-- jQuery (necessary for Bootstraps JavaScript plugins) --scriptsrc=///jquery/1.11.3/jquery.min.js/script!-- Include all compiled plugins (below), or include individual files as needed --scriptsrc=js/bootstrap.min.js/script/body/html我们要稍微做些修改，11行的css链接和26行的js链接的路径需要修改：复制…… link href=../dist/css/bootstrap.min.cssrel=stylesheet…… script src=../dist/js/bootstrap.min.js/script 其余那些关联到cdn的静态资源，就原样保留吧。注意，所有的js应该放到`body`的最后以加快文档的加载速度！然后你就可以直接在hb（HBuilder简写）里面运行这个页面了，效果如下：因为index.html的body中只有一个一级标题，所以我们只能看到这样的效果。3.导航条和正文内容请按以下几个步骤操作： - 从boots-home（下载的boots源码根目录）/docs/example/starter-template/index.html中拷贝body标签下的内容（不要script） - 覆盖index.html中的h1标签 - 运行并查看效果我们会发现导航条挡住了下面的正文内容，这是因为nav标记的样式类navbar-fixed