河南福彩22选5:bootstrap安装配置



下载Bootstrap

打开官方网站//getbootstrap.com/,点击Download Bootstrap。

Bootstrap1.png


1) 下载用于生产环境的文件

Bootstrap2.png


2) 下载用于编译css的Less源码及插件的js源文件

Bootstrap3.png


3) 下载用于编译css的Lass源码及插件的js源文件

Bootstrap4.png


4) Bootstrap文件结构

Bootstrap5.png


其中,css就是它帮我们定义好的css文件,凡是带min的就是压缩过的,js里面是定义好的js文件,同样min表示压缩过的文件。fonts里面包含多种字体格式eot、svg、ttf、woff、woff2,很多小图标它是用字体的方法来给你显示出来的,这样的话放大也不会失真,我们也可以改小图标的一些颜色。简而言之就是,不同的文字在不同的字体下显示不同的符号。比如说,你给汉字设置一个特别的英文字体,它就会显示特别的符号,比如说三角。


5) 用CDN直接引入


<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> 

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//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标准模版如下:

Bootstrap6.png


首先,它是引用HTML 5的DOCTYPE以及编码格式。


然后引入 <meta name=“viewport”content=“width=device-width,initial-scale=1”>这句话,这句话是bootstrap3.3.4版本中新增加的,它的意思是移动设备优先??矶染褪钦飧錾璞竏evice的宽度,initial-scale=1表示在移动设备上不进行缩放。不缩放时,移动设备上就出现了滚动条。

然后通过<link href=“css/bootstrap.min.css” rel=stylesheet”>引入Bootstrap的css文件。

然后通过

<script src=//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

Bootstrap7.png


2)打开HBuilder

Bootstrap8.png


3)点击鼠标右键新建一个Web项目

Bootstrap9.png


4)填写项目名称ch01,并把它保存在刚才新建的文件夹coder下。

Bootstrap10.png


5)打开index.html首先引入移动设备优先<meta name=“viewport”content=“width=device-width,initial-scale=1”>,再引入Bootstrap的css文件。


然后通过

<script src=//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里面写自己的结构。

Bootstrap11.png


index.html代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">


<!-- 可选的Bootstrap主题文件(一般不用引入) -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

</body>

</html>



6)再在ch01下新建一个index2.html

Bootstrap12.png


7)打开index2.html,第一步同样导入移动设备优先

Bootstrap13.png


8)标题名字为demo2

Bootstrap14.png


9)切换到我们的物理硬盘,找到我们的bootstrap文件并打开。

Bootstrap15.png


10)将bootstrap-3.3.4-dist目录下的css文件、img文件以及js文件复制粘贴到我们新建的Web项目coder下的ch01中,来代替已经自动生成的空的css文件、img文件以及js文件。

Bootstrap16.png


11)然后,回到我们的HBuilder,这样的话就有了js和css

Bootstrap17.png


12)引入电脑上的css,

<link rel=“stylesheet” href=”css/bootstrap.min.css”/>

这样的话将来这个文件就在你的服务器上,你的页面访问你的服务器这个时候是最快的如果你不想用CDN的话。

Bootstrap18.png


13)回到物理硬盘找到jquery文件并打开,将下面的文件复制

Bootstrap19.png


14)将复制的文件放在ch01的js文件中

Bootstrap20.png


15)再引入jquery

Bootstrap21.png


16)再引入bootstrap js

Bootstrap22.png


17)当完成这些操作,我们的页面就可以使用bootstrap定义的所有内容了。


18)使用bootstrap定义一个容器

Bootstrap23.png


19)进入这个网站

Bootstrap24.png


20)将nav标签里面的内容复制

Bootstrap25.png


21)将复制内容粘贴到index2.html里面的body标签中,粘贴完之后保存。

<!DOCTYPE html>

<html>

<head>

<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>

</head>

<body>

    <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>

          </button>

          <a class="navbar-brand" href="#">Project name</a>

        </div>

        <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>

          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </nav>


</body>

</html>

22)点击Chrome运行一下

Bootstrap26.png


23)显示运行结果

我们可以看到上面的菜单就有了

Bootstrap27.png


屏幕最小化的时候,点击右上角也会显示菜单。

Bootstrap28.png


这就和我们之前复制的代码有关,所用的样式就是bootstrap给我们定义好的样式。



练习

1)查看官方网站,起步里面,打开第一个导航条实例。  

Bootstrap29.png


2)然后点击鼠标右键查看源码

Bootstrap30.png


3)复制nav标签里面的这段代码 ,其它的需要自己导入。做出同样的效果。

Bootstrap31.png





【本文由麦子学院独家原创,转载请注明出处并保留原文链接】


logo
? 2012-2016 福建体彩网22选5 www.2dsj.com.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

麦子大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部

818| 831| 45| 45| 361| 23| 407| 178| 520| 478|