编程 Javascript

Bootstrap入门教程一Hello Bootstrap初识

Posted in Javascript onMarch 02, 2017

一、Bootstrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的布局、栅格、丰富的Web组件和jQuery插件等，并能通过Less进行样式定制。

二、Hello Bootstrap

1.建立项目目录结构，新建app、css、font、img和js目录，其中app存放angular相关子模板和控制器。向css目录中拷贝入ie10-viewport-bug-workaround.css，向js目录中拷贝入ie8-responsive-file-warning.js、ie-emulation-modes-warning.js和ie10-viewport-bug-workaround.js，这几个文件是让bootstrap在ie浏览器中针对ie的兼容性做的优化。

Bootstrap入门教程一Hello Bootstrap初识 ?

2.新建index.html页面，在中引入bootstrap.css及兼容ie的css：

Bootstrap入门教程一Hello Bootstrap初识

3.在底部依次引入jquery.js、bootstrap.js及兼容ie的js：

Bootstrap入门教程一Hello Bootstrap初识 ?

4.编写页面内容，先在标签下加入<div class="container"></div>,然后在其中插入具体页面代码，本例包括顶部导航和一个，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mac.Manon">
  <link rel="icon" href="../../favicon.ico">
  <title>Hello Bootstrap</title>
  <!-- 引入Bootstrap样式 -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <!--对IE特定版本的兼容性处理 开始-->
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <!-- Just for debugging purposes. Don‘t actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="js/ie-emulation-modes-warning.js"></script>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!--对IE特定版本的兼容性处理 结束-->
  <!-- 本模版专用相关样式 -->
  <link href="css/navbar.css" rel="stylesheet">
</head>
<body>
<!--container容器 开始-->
<div class="container">
  <!-- 导航 开始 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <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="#">Buyinplay</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
  <!--导航 结束-->
  <!-- 正文 开始 -->
  <div class="jumbotron">
    <h1>Hello Bootstrap !</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View detail docs »</a>
    </p>
  </div>
  <!--正文 结束-->
</div>
<!--container容器 结束-->
<!--引用js资源 开始-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--引用js资源 结束-->
</body>
</html>

效果如下：

Bootstrap入门教程一Hello Bootstrap初识

三、参考资源

官网：http://getbootstrap.com

官网中文站： http://www.bootcss.com

教程资源：http://www.runoob.com/bootstrap/bootstrap-page-header.html

以上所述是小编给大家介绍的Bootstrap入门教程一Hello Bootstrap初识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap入门教程一Hello Bootstrap初识

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 蒙版进度条（结合图片）

Mar 10 Javascript

javascript定义函数的方法

Dec 06 Javascript

写js时遇到的一些小问题

Dec 06 Javascript

很好用的js日历算法详细代码

Mar 07 Javascript

点击进行复制的JS代码实例

Aug 23 Javascript

ie浏览器使用js导出网页到excel并打印

Mar 11 Javascript

Uploadify上传文件方法

Mar 16 Javascript

详解JavaScript树结构

Jan 09 Javascript

javascript验证香港身份证的格式或真实性

Feb 07 Javascript

html5+canvas实现支持触屏的签名插件教程

May 08 Javascript

jquery实现图片轮播器

May 23 jQuery

vue二维数组循环嵌套方式循环数组、循环嵌套数组

Apr 24 Vue.js

详解使用grunt完成requirejs的合并压缩和js文件的版本控制

Mar 02 #Javascript

jQuery上传多张图片带进度条样式（DEMO）

Mar 02 #Javascript

jquery仿京东侧边栏导航效果

Mar 02 #Javascript

关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

Mar 02 #Javascript

JavaScript html5利用FileReader实现上传功能

Mar 27 #Javascript

利用ES6语法重构React组件详解

Mar 02 #Javascript

深入理解在JS中通过四种设置事件处理程序的方法

Mar 02 #Javascript

You might like

php项目打包方法

2008/02/18 PHP

用PHP+MySQL搭建聊天室功能实例代码

2012/08/20 PHP

php类声明和php类使用方法示例分享

2014/03/29 PHP

codeigniter中view通过循环显示数组数据的方法

2015/03/20 PHP

php使用socket post数据到其它web服务器的方法

2015/06/02 PHP

Laravel框架模板继承操作示例

2018/06/11 PHP

PHP defined()函数的使用图文详解

2019/07/20 PHP

laravel7学习之无限级分类的最新实现方法

2020/09/30 PHP

用javascript父窗口控制只弹出一个子窗口

2007/04/10 Javascript

JS实现悬浮移动窗口(悬浮广告)的特效

2013/03/12 Javascript

javascript生成json数据简单示例分享

2014/02/14 Javascript

js实现文本框输入文字个数限制代码

2015/12/25 Javascript

基于JS实现导航条之调用网页助手小精灵的方法

2016/06/17 Javascript

CentOS环境中MySQL修改root密码方法

2018/01/07 Javascript

js+css实现打字效果

2020/06/24 Javascript

vue组件的写法汇总

2018/04/12 Javascript

js面向对象方式实现拖拽效果

2021/03/03 Javascript

Python 获取新浪微博的最新公共微博实例分享

2014/07/03 Python

python调用c++ ctype list传数组或者返回数组的方法

2019/02/13 Python

Python判断两个文件是否相同与两个文本进行相同项筛选的方法

2019/03/01 Python

python绘制彩虹图

2019/12/16 Python

Python中包的用法及安装

2020/02/11 Python

python 根据列表批量下载网易云音乐的免费音乐

2020/12/03 Python

CSS3实现背景透明文字不透明的示例代码

2018/06/25 HTML / CSS

美国球鞋寄卖网站：Stadium Goods

2018/05/09 全球购物

写好自荐信的技巧

2013/11/08 职场文书

回门宴答谢词

2014/01/13 职场文书

2014年护士长工作总结

2014/11/11 职场文书

新教师个人总结

2015/02/06 职场文书

史上最牛辞职信

2015/05/13 职场文书

2015年行政人事部工作总结

2015/05/13 职场文书

人民的好儿女观后感

2015/06/18 职场文书

学习党章心得体会2016

2016/01/15 职场文书

找规律教学反思

2016/02/23 职场文书

第四次工业革命，打工人与机器人的竞争

2022/04/21 数码科技

SQL Server中的逻辑函数介绍

2022/05/25 SQL Server