一、下载

https://codeload.github.com/twbs/bootstrap/zip/v3.3.7

源码：https://github.com/twbs/bootstrap

文件目录：

- dist
- docs
- fonts
- grunt
- js
- less
- nuget

二、准备项目模板文件夹

1.下载

https://codeload.github.com/OliverDaDa/html5-boilerplate/zip/master

HTML5 Boilerplate: The web’s most popular front-end template

2.文件目录

文件目录：

+ dist
    + css
    + doc
    + img
    + js
    - index.html
+ src
+ test

3.删除不必要的样本文件

css文件夹
doc文件夹
CHANGELOG.md文件
CONTRIBUTING.md文件

4.理解样本中的.htaccess文件

保证站点性能最优

5.更新必要的样本文件

humans.txt：记载贡献者
LICENSE.txt：许可信息
README.md文件：项目说明

6.更新图标文件

favicon.ico：32px*32px
apple-touch-icon-precomposed.png：144px*144px

三、加入Bootstrap文件

1.字体

复制Bootstrap主文件夹中的fonts文件夹到工程文件夹Project1中
在fonts文件夹中创建.htaccess文件，内容如下：

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttf|woff)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

.htaccess文件用于确保无论站点使用什么CDN服务，所有浏览器都可以使用fonts里的Web字体

2.JavaScript

工程文件夹中新建js/bootstrap文件夹
将Bootstrap文件夹中的js文件夹中的js文件复制到上一步新建的文件夹中

主要文件有：

affix.js
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
transition.js

原本文件有：

vendor文件夹
- jquery-3.4.1.min.js
- modernizr-3.8.0.min.js（Modernizr 中文网）

plugins.js
main.js

- 将bootstrap.min.js里的代码全选复制到新项目文件夹中的plugins.js中`// Place any jQuery/helper plugins in here.`下面

3.暂不考虑css文件

稍后用less创建自定义文件

4.复制less文件

less文件夹整个复制到新项目文件夹下

5.盘点

目前新项目文件夹的目录结构应该是如下：

img文件夹
- 空
fonts文件夹
- .htaccess
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
js文件夹
less文件夹

404.html
favicon.ico
index.html
robots.txt
humans.txt
LICENSE.txt
README.md文件

四、构造HTML模板

1.原有代码

站点描述

<meta name="description" content="">

针对移动浏览器视口标签

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

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

主题颜色

<meta name="theme-color" content="#fafafa">

在IE运行最新的渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

兼容IE

<!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

jQuery脚本

<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>

<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>

<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>

谷歌Analytics脚本

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>

<script src="https://www.google-analytics.com/analytics.js" async></script>

2.新增代码

添加标题

<title>Bootstrap&#39; Portfolio</title>

添加内容

  <header role="banner">
    <nav role="navigation" class="navbar navbar-static-top navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Project name</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </nav>
  </header>
  
  <main role="main">
    <h1>Main Heading</h1>
    <p>Content specific to this page goes here.</p>
  </main>
  
  <footer role="contentinfo">
    <p><small>Copyright &copy; Company Name</small></p>
  </footer>

3.编译less文件

Less 工具 | Less.js 中文文档 - Less 中文网

WinLess下载

工程目录下新建css文件夹
将整个工程目录添加到编译窗口中
在右侧找到bootstrap.less，右击选择输出文件到css文件夹，保存
勾选需要编译的文件，点击完成
在index.html中删除normalize.css的链接（bootstrap.css已含）
将bootstrap.css复制一份命名为main.css
在浏览器查看index.html效果

4.完成响应式导航条

补充代码：

<nav role="navigation" class="navbar navbar-static-top navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.nav-collapse-->
  </div>
</nav>

代码说明
- 类navbar-toggle用于应用css样式
- icon-bar：三道杠按钮
- data-toggle：bootstrap的js插件用到的，表预期行为
- data-target：bootstrap的js插件用到的，表预期目标
拖动浏览器窗口小于980px，即可检验效果。

5.支持IE8

respond.js 腻子脚本下载

scottjehl/Respond
respond.js | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

找到respond.min.js
复制到js/vendor目录，并添加到index.html的Modernizr后，内容如下：

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
    <script src="js/vendor/respond.min.js"></script>
<![endif]-->

五、小结

最终效果查看:
index.html
index.html源码如下

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/main.css">
        <!-- Modernizr -->
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <!-- Respond.js for IE 8 or less only -->
        <!--[if (lt IE 9) & (!IEMobile)]>
            <script src="js/vendor/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!--[if lte IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <header role="banner">
            <nav role="navigation" class="navbar navbar-default">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="index.html">Project name</a>
                </div>
                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                  </ul>
                </div><!--/.nav-collapse -->
              </div><!--/.container -->
            </nav>
        </header>

        <main role="main">
          <h1>Main Heading</h1>
          <p>Content specific to this page goes here.</p>
        </main>

        <footer role="contentinfo">
            <p><small>Copyright &copy; Company Name</small></p>
        </footer>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

Jump Start Bootstrap 中文翻译 - 文集 - 简书

Bootstrap（基础一） - 简书

less的配置安装及语法使用 - 简书

Bootstrap基本使用操作 - 简书

聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp · Ruby China

.htaccess 详解 - Wiliz - 博客园

点赞 1
收藏
分享
- 文章举报

onc-virn

发布了34 篇原创文章 · 获赞 83 · 访问量 2万+

私信关注

来源：oschina

链接：https://my.oschina.net/u/4415966/blog/3235790

标签

javascript

navbar

jquery

【笔记】《Bootstrap实战》——第1章初识Bootstrap

文章目录

一、下载

二、准备项目模板文件夹

1.下载

2.文件目录

3.删除不必要的样本文件

4.理解样本中的.htaccess文件

5.更新必要的样本文件

6.更新图标文件

三、加入Bootstrap文件

1.字体

2.JavaScript

3.暂不考虑css文件

4.复制less文件

5.盘点

四、构造HTML模板

1.原有代码

2.新增代码

3.编译less文件

4.完成响应式导航条

5.支持IE8

五、小结

【笔记】《Bootstrap实战》——第1章 初识Bootstrap

文章目录

一、下载

二、准备项目模板文件夹

1.下载

2.文件目录

3.删除不必要的样本文件

4.理解样本中的.htaccess文件

5.更新必要的样本文件

6.更新图标文件

三、加入Bootstrap文件

1.字体

2.JavaScript

3.暂不考虑css文件

4.复制less文件

5.盘点

四、构造HTML模板

1.原有代码

2.新增代码

3.编译less文件

4.完成响应式导航条

5.支持IE8

五、小结

【笔记】《Bootstrap实战》——第1章初识Bootstrap