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

小议Function.apply() 之一------(函数的劫持与对象的复制)

Nov 30 Javascript

javascript写的简单的计算器，内容很多，方法实用，推荐

Dec 29 Javascript

Jquery通过Ajax方式来提交Form表单的具体实现

Nov 07 Javascript

jquery动态导航插件dynamicNav用法实例分析

Sep 06 Javascript

js获取对象、数组的实际长度,元素实际个数的实现代码

Jun 08 Javascript

jQuery自制提示框tooltip改进版

Aug 01 Javascript

BootstrapTable请求数据时设置超时(timeout)的方法

Jan 22 Javascript

vue.js移动端app实战1：初始配置详解

Jul 24 Javascript

Node.js实现连接mysql数据库功能示例

Sep 15 Javascript

vue-cli构建vue项目的步骤详解

Jan 27 Javascript

vue集成kindeditor富文本的实现示例代码

Jun 07 Javascript

基于JavaScript实现随机点名器

Feb 25 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生成缩略图示例代码分享(使用gd库实现)

2014/01/20 PHP

PHP的拦截器实例分析

2014/11/03 PHP

利用PHP绘图函数实现简单验证码功能的方法

2016/10/18 PHP

PHP 数组黑名单/白名单实例代码详解

2019/06/04 PHP

javascript的字符串按引用复制和传递,按值来比较介绍与应用

2012/12/28 Javascript

jquery 文本上下无缝滚动,鼠标放上去就停止小例子

2013/06/05 Javascript

如何设置iframe高度自适应在跨域情况下的可用方法

2013/09/06 Javascript

基于jQuery的图片不完全按比例自动缩小

2014/07/11 Javascript

js+HTML5实现canvas多种颜色渐变效果的方法

2015/06/05 Javascript

IOS中safari下的select下拉菜单文字过长不换行的解决方法

2016/09/26 Javascript

js仿支付宝多方框输入支付密码效果

2016/09/27 Javascript

JS中用EL表达式获取上下文参数值的方法

2018/03/28 Javascript

详解关于vue-area-linkage走过的坑

2018/06/27 Javascript

如何提升vue.js中大型数据的性能

2019/06/21 Javascript

js实现消灭星星(web简易版)

2020/03/24 Javascript

JavaScript实现矩形块大小任意缩放

2020/08/25 Javascript

vue-cli3项目配置eslint代码规范的完整步骤

2020/09/10 Javascript

使用Python脚本来控制Windows Azure的简单教程

2015/04/16 Python

Python实现压缩与解压gzip大文件的方法

2016/09/18 Python

python生成式的send()方法(详解)

2017/05/08 Python

Python中执行存储过程及获取存储过程返回值的方法

2017/10/07 Python

python实现微信小程序自动回复

2018/09/10 Python

python连接PostgreSQL数据库的过程详解

2019/09/18 Python

在pycharm中实现删除bookmark

2020/02/14 Python

Jmeter调用Python脚本实现参数互相传递的实现

2021/01/22 Python

迪卡侬波兰体育用品商店：Decathlon波兰

2020/03/31 全球购物

党员自我评价分享

2013/12/13 职场文书

公司周年庆典邀请函

2014/01/12 职场文书

甜美蛋糕店创业计划书

2014/01/30 职场文书

小学六一儿童节活动方案

2014/08/27 职场文书

新学期红领巾广播稿

2014/10/04 职场文书

离婚协议书范本（2016最新版）

2016/03/18 职场文书

详解RedisTemplate下Redis分布式锁引发的系列问题

2021/04/27 Redis

浅谈Redis主从复制以及主从复制原理

2021/05/29 Redis

关于React Native使用axios进行网络请求的方法

2021/08/02 Javascript

MySQL中几种插入和批量语句实例详解

2021/09/14 MySQL