为什么配置完原来的LOCALHOST页面进不去
为什么配置完原来的LOCALHOST页面进不去
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11bootstrap前端框架怎么用_百度知道
bootstrap前端框架怎么用
我有更好的答案
因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载方法&#47，属于扁平化的那种。3以上两步点击下载按钮后都会跳转到一个详细下载列表，有三种Bootstrap，个人感觉比较好用。6接下来就是要引入css文件了，要把文件的路径写正确，分别是css、font，最新版本都是3，这里推荐Dreamweaver CS6、js，里面带min的文件都是压缩后的文件，在网站上线的时候用，其他未压缩的文件我们可以在平时开发的时候用。5再之后就是要用这套Bootstrap框架了，你可以用任何文本编辑器;步骤1首先我们当然是需要得到Bootstrap相关文件，我们可以到国内做的汉化比较好的Bootstrap网站去下载，这里我们下载第一个就可以了。2如果你的英文水平不是太好的话，如果网页内用到了Bootstrap的js效果，那么必须先引入jQuery文件，因为Bootstrap的js插件都是基于jQuery的。7最后就可以在body标签内应用Bootstrap相关的class了。4下载完成后解压，会看到文件有三个子文件夹，没关系，首先要做的就是建立一个html文件，这些都是封装好的，只要嵌套正确就是做出漂亮的网页了
为您推荐：
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2747人阅读
Bootstrap（51）
bootstrap安装配置
下载Bootstrap
打开官方网站http://getbootstrap.com/，点击Download Bootstrap。
1) 下载用于生产环境的文件
2) 下载用于编译css的Less源码及插件的js源文件
3) 下载用于编译css的Lass源码及插件的js源文件
4) Bootstrap文件结构
其中，css就是它帮我们定义好的css文件，凡是带min的就是压缩过的，js里面是定义好的js文件，同样min表示压缩过的文件。fonts里面包含多种字体格式eot、svg、ttf、woff、woff2，很多小图标它是用字体的方法来给你显示出来的，这样的话放大也不会失真，我们也可以改小图标的一些颜色。简而言之就是，不同的文字在不同的字体下显示不同的符号。比如说，你给汉字设置一个特别的英文字体，它就会显示特别的符号，比如说三角。
5) 用CDN直接引入
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"&
&!-- 可选的Bootstrap主题文件（一般不用引入） --&
&link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
直接引入上面CDN的文件就不用再下载bootstrap了，前提是你的电脑一定能上网，才可以引入这个CDN的文件。
html标准模版
（也就是说，我们写一个Bootstrap的html的文件的时候，需要符合什么样的标准。）
1) HTML5文档结构
2) 移动设备优先
3) Bootstrap css引入
4) Jquery引入
5) Bootstrap js引入
在官方网站也给出了html标准模版如下：
首先，它是引用HTML 5的DOCTYPE以及编码格式。
然后引入 &meta name=“viewport”content=“width=device-width，initial-scale=1”&这句话，这句话是bootstrap3.3.4版本中新增加的，它的意思是移动设备优先。宽度就是这个设备device的宽度，initial-scale=1表示在移动设备上不进行缩放。不缩放时，移动设备上就出现了滚动条。
然后通过&link href=“css/bootstrap.min.css” rel=stylesheet”&引入Bootstrap的css文件。
&script src=http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”&&/script& 引入Jquery文件 。
最后通过&script src=“js.bootstrap.min.js&&/script& 引入Bootstrap js文件。
bootstrap说到底是html、css、javascript的前端框架，所以说凡是开发html、css、javascript的工具，它都可以开发。
1) nodepad++
2) dreamweaver cs6
3) HBuilder（我们以后的课程会选取HBuilder作为我们的开发工具）
4) webstorm
第一个网页
1) 引用Bootstrap
2) 编写html代码结构
3) 使用Bootstrap样式
1）在Bootstrap下新建一文件coder
2）打开HBuilder
3）点击鼠标右键新建一个Web项目
4）填写项目名称ch01，并把它保存在刚才新建的文件夹coder下。
5）打开index.html首先引入移动设备优先&meta name=“viewport”content=“width=device-width，initial-scale=1”&，再引入Bootstrap的css文件。
&script src=http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”&&/script& 引入Jquery文件 。
最后通过&script src=“cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js&&/script& 引入Bootstrap js文件。
这样，我们就可以在body里面写自己的结构。
index.html代码如下：
&!DOCTYPE html&
&meta charset="utf-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&&/title&
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"&
&!-- 可选的Bootstrap主题文件（一般不用引入） --&
&link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
6）再在ch01下新建一个index2.html
7）打开index2.html，第一步同样导入移动设备优先
8）标题名字为demo2
9）切换到我们的物理硬盘，找到我们的bootstrap文件并打开。
10）将bootstrap-3.3.4-dist目录下的css文件、img文件以及js文件复制粘贴到我们新建的Web项目coder下的ch01中，来代替已经自动生成的空的css文件、img文件以及js文件。
11）然后，回到我们的HBuilder，这样的话就有了js和css
12）引入电脑上的css,
&link rel=“stylesheet” href=”css/bootstrap.min.css”/&
这样的话将来这个文件就在你的服务器上，你的页面访问你的服务器这个时候是最快的如果你不想用CDN的话。
13）回到物理硬盘找到jquery文件并打开，将下面的文件复制
14）将复制的文件放在ch01的js文件中
15）再引入jquery
16）再引入bootstrap js
17）当完成这些操作，我们的页面就可以使用bootstrap定义的所有内容了。
18）使用bootstrap定义一个容器
19）进入这个网站
20）将nav标签里面的内容复制
21）将复制内容粘贴到index2.html里面的body标签中，粘贴完之后保存。
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&demo02&/title&
&link rel="stylesheet" href="css/bootstrap.min.css" /&
&script type="application/javascript" src="js/jquery-1.11.1.min.js"&&/script&
&script type="application/javascript" src="js/bootstrap.min.js"&&/script&
&nav class="navbar navbar-inverse navbar-fixed-top"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand" href="#"&Project name&/a&
&div id="navbar" class="collapse navbar-collapse"&
&ul class="nav navbar-nav"&
&li class="active"&&a href="#"&Home&/a&&/li&
&li&&a href="#about"&About&/a&&/li&
&li&&a href="#contact"&Contact&/a&&/li&
&/div&&!--/.nav-collapse --&
22）点击Chrome运行一下
23）显示运行结果
我们可以看到上面的菜单就有了
屏幕最小化的时候，点击右上角也会显示菜单。
这就和我们之前复制的代码有关，所用的样式就是bootstrap给我们定义好的样式。
1）查看官方网站，起步里面，打开第一个导航条实例。
2）然后点击鼠标右键查看源码
3）复制nav标签里面的这段代码 ，其它的需要自己导入。做出同样的效果。【Bootstrap第二节】基本环境的配置
【Bootstrap第二节】基本环境的配置
作者：admin来源：Web前端之家浏览：10838评论:1
微信公众号
上一篇文章我们讲到“”，主要介绍了bootstrap的一些基本知识和竞争优势，这节主要让大家了解下Bootstrap基本环境的配置。Bootstrap 3.0版本提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。■ 用于生产环境的 Bootstrap： 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。■ Bootstrap源码：Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。■ Sass：这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。上面三种方式，在一些小公司可能第一种用的比较多，如果是大公司，后面两种居多，因为他们便于管理和维护。对于我们个人来说，三种都应该掌握。说完三种方式，接下来介绍如何把bootstrap应用到具体页面中呢，我们可以在页面中引入如下代码：&!--&新&Bootstrap&核心&CSS&文件&--&&
&link&rel=&stylesheet&&href=&//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css&&
&!--&可选的Bootstrap主题文件（一般不用引入）&--&&
&link&rel=&stylesheet&&href=&//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css&&
&!--&jQuery文件。务必在bootstrap.min.js&之前引入&--&
&script&src=&//cdn.bootcss.com/jquery/1.11.3/jquery.min.js&&&/script&
&!--&最新的&Bootstrap&核心&JavaScript&文件&--&
&script&src=&//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js&&&/script&Bootstrap中文网为Bootstrap专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。【当然啦，我们可以进行二次开发】预编译版当我们下载完安装包后，解压后可以看下文件目录:bootstrap/
├──&css/
│&&&├──&bootstrap.css
│&&&├──&bootstrap.css.map
│&&&├──&bootstrap.min.css
│&&&├──&bootstrap-theme.css
│&&&├──&bootstrap-theme.css.map
│&&&└──&bootstrap-theme.min.css
├──&js/
│&&&├──&bootstrap.js
│&&&└──&bootstrap.min.js
└──&fonts/
&&&&├──&glyphicons-halflings-regular.eot
&&&&├──&glyphicons-halflings-regular.svg
&&&&├──&glyphicons-halflings-regular.ttf
&&&&├──&glyphicons-halflings-regular.woff
&&&&└──&glyphicons-halflings-regular.woff2上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。Bootstrap 源码Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：bootstrap/
├──&less/
├──&js/
├──&fonts/
├──&dist/
│&&&├──&css/
│&&&├──&js/
│&&&└──&fonts/
└──&docs/
&&&&└──&examples/说明：less/ js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。编译 CSS 和 JavaScript 文件Bootstrap 使用
作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。安装 Grunt 前，你需要首先 （npm 已经包含在内）。npm 是
的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。然后在命令行中输入以下命令：在全局环境中安装 grunt-cli ：npm install -g grunt-cli 。进入 /bootstrap/ 根目录，然后执行 npm install 命令。npm 将读取
文件并自动安装此文件中列出的所有被依赖的扩展包。上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。可用的 Grunt 命令grunt dist （仅编译 CSS 和 JavaScript 文件）重新生成 /dist/ 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。grunt watch （监测文件的改变，并运行指定的 Grunt 任务）监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。grunt test （运行测试用例）在
环境中运行
自动化测试用例。grunt docs （编译并测试文档中的资源文件）编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。grunt （重新构建所有内容并运行测试用例）编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要
工具。这些只有在你对 Bootstrap 深度研究时才有用。除错如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 /node_modules/ 目录，然后，再次运行 npm install 命令。基本模板使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。&!DOCTYPE&html&
&&&&&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=&//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&&&/script&
&&&&&&&script&src=&//cdn.bootcss.com/respond.js/1.4.2/respond.min.js&&&/script&
&&&&&![endif]--&
&&&&&h1&你好，世界！&/h1&
&&&&&!--&jQuery&(necessary&for&Bootstrap's&JavaScript&plugins)&--&
&&&&&script&src=&//cdn.bootcss.com/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&
&/html&预览效果：总结关于bootstrap的基本配置方面的知识主要介绍这么多，下一节我们介绍：。
温馨提示：本文作者系，经编辑修改或补充，转载请注明出处和本文链接：http://www.jiangweishan.com/article/bootstrap-chapter2.html
&发布于& 14:24:11&&
感谢博主分享。~
02-18&&03-26&&12-30&&12-16&&10-17&&12-03&&08-24&&03-05&&12-09&&03-06&&
QQ交流群：
||||||||||||||
Copyright (C)
Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.粤ICP备号-1}