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

jQuery获取注册信息并提示实现代码

Apr 21 Javascript

jQuery中 prop() attr()使用详解

May 19 Javascript

js实现不提交表单获取单选按钮值的方法

Aug 21 Javascript

JavaScript中三种异步上传文件方式

Mar 06 Javascript

jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

Aug 05 Javascript

ES6新特性之解构、参数、模块和记号用法示例

Apr 01 Javascript

详解vue.js2.0父组件点击触发子组件方法

May 10 Javascript

关于HTTP传输中gzip压缩的秘密探索分析

Jan 12 Javascript

如何在Vue中使用CleaveJS格式化你的输入内容

Dec 14 Javascript

Vue实现可移动水平时间轴

Jun 29 Javascript

js 压缩图片的示例（只缩小体积，不更改图片尺寸）

Oct 21 Javascript

小程序组件传值和引入sass的方法(使用vant Weapp组件库)

Nov 24 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 数组排序 array_multisort与uasort的区别

2011/03/24 PHP

PHP中extract()函数的定义和用法

2012/08/17 PHP

提高php编程效率技巧

2015/08/13 PHP

PHP命令Command模式用法实例分析

2018/08/08 PHP

CSS和JS标签style属性对照表(方便js开发的朋友)

2010/11/11 Javascript

JAVASCRIPT车架号识别/验证函数代码汽车车架号验证程序

2012/01/08 Javascript

Jquery实现网页跳转或用命令打开指定网页的解决方法

2013/07/09 Javascript

jquery判断复选框选中状态以及区分attr和prop

2015/12/18 Javascript

JavaScript实现弹出模态窗体并接受传值的方法

2016/02/12 Javascript

jQuery 实时保存页面动态添加的数据的示例

2017/08/14 jQuery

全站最详细的Vuex教程

2018/04/13 Javascript

VUE的history模式下除了index外其他路由404报错解决办法

2019/08/21 Javascript

微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

2019/12/17 Javascript

python正则表达式去掉数字中的逗号(python正则匹配逗号)

2013/12/25 Python

Python内置的字符串处理函数详细整理(覆盖日常所用)

2014/08/19 Python

Python实现中文数字转换为阿拉伯数字的方法示例

2017/05/26 Python

Python编程之序列操作实例详解

2017/07/22 Python

Python装饰器(decorator)定义与用法详解

2018/02/09 Python

Python基于datetime或time模块分别获取当前时间戳的方法实例

2019/02/19 Python

Python使用paramiko操作linux的方法讲解

2019/02/25 Python

django迁移数据库错误问题解决

2019/07/29 Python

关于Python核心框架tornado的异步协程的2种方法详解

2019/08/28 Python

利用pandas将非数值数据转换成数值的方式

2019/12/18 Python

利用python中的matplotlib打印混淆矩阵实例

2020/06/16 Python

Python生成pdf目录书签的实例方法

2020/10/29 Python

css3中background新增的4个新的相关属性用法介绍

2013/09/26 HTML / CSS

锐步美国官方网站：Reebok美国

2018/01/10 全球购物

TUMI新加坡官网：国际领先的商旅箱包品牌

2019/01/12 全球购物

应届生求职自荐信范文

2014/04/07 职场文书

医院营销工作计划

2015/01/16 职场文书

2015年学校党建工作总结

2015/05/19 职场文书

2015年小学辅导员工作总结

2015/05/27 职场文书

走进科学观后感

2015/06/18 职场文书

人与自然的观后感

2015/06/18 职场文书

vue项目多环境配置(.env)的实现

2021/07/21 Vue.js

mysql sock文件存储了什么信息

2022/07/15 MySQL