编程 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 12 Javascript

js调用css属性写法

Sep 21 Javascript

使用Js让Html中特殊字符不被转义

Nov 05 Javascript

Jquery自定义button按钮的几种方法

Jun 11 Javascript

JavaScript判断是否为数字的4种方法及效率比较

Apr 01 Javascript

JavaScript中日期函数的相关操作知识

Aug 03 Javascript

轻松搞定jQuery+JSONP跨域请求的解决方案

Mar 06 jQuery

Vue 仿QQ左滑删除组件功能

Mar 12 Javascript

小程序如何自主实现拦截器的示例代码

Nov 04 Javascript

Vue解析剪切板图片并实现发送功能

Feb 04 Javascript

webpack的 rquire.context用法实现工程自动化的方法

Feb 07 Javascript

解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

Dec 04 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)

2014/05/10 PHP

PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法

2014/07/08 PHP

Laravel+jQuery实现AJAX分页效果

2016/09/14 PHP

详解PHP处理字符串类似indexof的方法函数

2017/06/11 PHP

PHP获取当前系统时间的方法小结

2018/10/03 PHP

关闭浏览器输入框自动补齐兼容IE,FF,Chrome等主流浏览器

2014/02/11 Javascript

js语法学习之判断一个对象是否为数组

2014/05/13 Javascript

jQuery实现冻结表头的方法

2015/03/09 Javascript

JavaScript function函数种类详解

2016/02/22 Javascript

基于javascript编写简单日历

2016/05/02 Javascript

jQuery实现查找链接文字替换属性的方法

2016/06/27 Javascript

分享javascript、jquery实用代码段

2016/10/20 Javascript

Bootstrap超大屏幕的实现代码

2017/03/22 Javascript

jQuery Jsonp跨域模拟搜索引擎

2017/06/17 jQuery

jQuery Collapse1.1.0折叠插件简单使用

2017/08/28 jQuery

微信小程序选择图片和放大预览图片功能

2017/11/02 Javascript

jQuery序列化form表单数据为JSON对象的实现方法

2018/09/20 jQuery

详解基于node.js的脚手架工具开发经历

2019/01/28 Javascript

layui 根据后台数据动态创建下拉框并同时默认选中的实例

2019/09/02 Javascript

javascript实现移动端红包雨页面

2020/06/23 Javascript

浅析Python中的多进程与多线程的使用

2015/04/07 Python

python实现解数独程序代码

2017/04/12 Python

Python中的pygal安装和绘制直方图代码分享

2017/12/08 Python

python 3.6 +pyMysql 操作mysql数据库(实例讲解)

2017/12/20 Python

python打包生成的exe文件运行时提示缺少模块的解决方法

2018/10/31 Python

浅谈pycharm出现卡顿的解决方法

2018/12/03 Python

Django中如何防范CSRF跨站点请求伪造攻击的实现

2019/04/28 Python

Pytorch之view及view_as使用详解

2019/12/31 Python

python+django+selenium搭建简易自动化测试

2020/08/19 Python

python使用re模块爬取豆瓣Top250电影

2020/10/20 Python

美国购车网站：TrueCar

2016/10/19 全球购物

南非最大的花卉和送礼服务：NetFlorist

2017/09/13 全球购物

高中政治教学反思

2014/01/18 职场文书

运动会广播稿200米（5篇）

2014/10/15 职场文书

小石潭记导游词

2015/02/03 职场文书

2015年卫生监督工作总结

2015/05/21 职场文书