编程 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 相关文章推荐

JavaScript DOM 学习第三章内容表格

Feb 19 Javascript

通过Javascript创建一个选择文件的对话框代码

Jun 16 Javascript

JavaScript window.document的属性、方法和事件小结

Oct 24 Javascript

Javascript基础教程之数据类型转换

Jan 18 Javascript

jquery衣服颜色选取插件效果代码分享

Aug 28 Javascript

javascript实现tab切换的两个实例

Nov 05 Javascript

JavaScript基础篇（3)之Object、Function等引用类型

Nov 30 Javascript

bootstrap侧边栏圆点导航

Jan 11 Javascript

JS判断指定dom元素是否在屏幕内的方法实例

Jan 23 Javascript

谈谈VUE种methods watch和compute的区别和联系

Aug 01 Javascript

Element-UI踩坑之Pagination组件的使用

Oct 29 Javascript

浅谈vue中$bus的使用和涉及到的问题

Jul 28 Javascript

详解使用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 socket并借助telnet实现简单的聊天程序

2013/06/18 PHP

Laravel 5框架学习之Eloquent 关系

2015/04/09 PHP

PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析

2016/10/11 PHP

php cli模式下获取参数的方法

2017/05/05 PHP

javascript中String类的subString()方法和slice()方法

2011/05/24 Javascript

js中将HTMLCollection/NodeList/伪数组转换成数组的代码

2011/07/31 Javascript

JavaScript中的View-Model使用介绍

2011/08/11 Javascript

你必须知道的Javascript知识点之"字面量和对应类型"说明介绍

2013/04/23 Javascript

JS简单的轮播的图片滚动实例

2013/06/17 Javascript

js操作iframe的一些方法介绍

2013/06/25 Javascript

ExtJS4利根据登录后不同的角色分配不同的树形菜单

2014/05/02 Javascript

html的DOM中Event对象onabort事件用法实例

2015/01/21 Javascript

javascript去除字符串左右两端的空格

2015/02/05 Javascript

JavaScript中Number.MAX_VALUE属性的使用方法

2015/06/04 Javascript

详解AngularJS中module模块的导入导出

2015/12/10 Javascript

jQuery基于BootStrap样式实现无限极地区联动

2016/08/26 Javascript

JavaScript 限制文本框不可输入英文单双引号的方法

2016/12/20 Javascript

javascript事件的绑定基础实例讲解（34）

2017/02/14 Javascript

JavaScript 事件流、事件处理程序及事件对象总结

2017/04/01 Javascript

详解Webpack实战之构建 Electron 应用

2017/12/25 Javascript

深入了解js原型模式

2019/05/30 Javascript

js实现坦克移动小游戏

2019/10/28 Javascript

微信小程序实现二维码签到考勤系统

2020/01/16 Javascript

Vue单文件组件开发实现过程详解

2020/07/30 Javascript

python实现随机密码字典生成器示例

2014/04/09 Python

python调用windows api锁定计算机示例

2014/04/17 Python

详解python进行mp3格式判断

2016/12/23 Python

几种实用的pythonic语法实例代码

2018/02/24 Python

男女时尚与复古风格在线购物：RoseGal（全球免费送货）

2017/07/19 全球购物

Gloeilampgoedkoop荷兰：在线购买灯泡

2019/02/16 全球购物

说一下Linux下有关用户和组管理的命令

2016/01/04 面试题

大学生求职自荐信

2013/12/12 职场文书

大二学生职业生涯规划书

2014/02/05 职场文书

检讨书范文500字

2015/01/28 职场文书

对外汉语教师推荐信

2015/03/27 职场文书

记一次Mysql不走日期字段索引的原因小结

2021/10/24 MySQL