编程 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 产生不重复的随机数三种实现思路

Dec 13 Javascript

textarea 控制输入字符字节数(示例代码)

Dec 27 Javascript

textarea焦点的用法实现获取焦点清空失去焦点提示效果

May 19 Javascript

详解Javacript和AngularJS中的Promises

Feb 09 Javascript

javascript显示系统当前时间代码

Dec 29 Javascript

JS全角与半角转化实例(分享)

Jul 04 Javascript

原生JS实现自定义滚动条效果

Oct 27 Javascript

swiper自定义分页器使用方法详解

Sep 14 Javascript

关于jquery layui弹出层的使用方法

Apr 21 jQuery

Vue父子组件之间的通信实例详解

Sep 28 Javascript

ES6中let、const的区别及变量的解构赋值操作方法实例分析

Oct 15 Javascript

在vue中给后台接口传的值为数组的格式代码

Nov 12 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

我的群发邮件程序

2006/10/09 PHP

PHP类型约束用法示例

2016/09/28 PHP

php指定长度分割字符串str_split函数用法示例

2017/01/30 PHP

php传值和传引用的区别点总结

2019/11/19 PHP

JavaScript脚本性能的优化方法

2007/02/02 Javascript

JavaScript XML实现两级级联下拉列表

2008/11/10 Javascript

动态加载图片路径保持JavaScript控件的相对独立性

2010/09/06 Javascript

js图片预加载示例

2014/04/30 Javascript

AngularJS入门教程（零）：引导程序

2014/12/06 Javascript

Vue.js每天必学之Class与样式绑定

2016/09/05 Javascript

JS常用倒计时代码实例总结

2017/02/07 Javascript

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

2017/05/17 Javascript

node实现定时发送邮件的示例代码

2017/08/26 Javascript

原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

2017/09/10 Javascript

JS实现静态页面搜索并高亮显示功能完整示例

2017/09/19 Javascript

Vue2 轮播图slide组件实例代码

2018/05/31 Javascript

nodejs 使用nodejs-websocket模块实现点对点实时通讯

2018/11/28 NodeJs

vue中配置scss全局变量的步骤

2020/12/28 Vue.js

python添加菜单图文讲解

2019/06/04 Python

Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解）)

2019/12/09 Python

python中的split()函数和os.path.split()函数使用详解

2019/12/21 Python

详解python破解zip文件密码的方法

2020/01/13 Python

python 爬取疫情数据的源码

2020/02/09 Python

python通过文本在一个图中画多条线的实例

2020/02/21 Python

python excel和yaml文件的读取封装

2021/01/12 Python

python中time.ctime()实例用法

2021/02/03 Python

DAWGS鞋官方网站：鞋，凉鞋，靴子

2016/10/04 全球购物

复古风格的女装和装饰品：ModCloth

2017/12/29 全球购物

Pedro官网：新加坡时尚品牌

2019/08/27 全球购物

业务主管岗位职责范本

2013/12/25 职场文书

运动会稿件50字

2014/02/17 职场文书

安全生产管理责任书

2014/04/16 职场文书

基层党支部整改方案

2014/10/25 职场文书

2016个人先进事迹材料范文

2016/03/01 职场文书

实用干货：敬酒词大全，帮你应付各种场合

2019/11/21 职场文书

Python之基础函数案例详解

2021/08/30 Python