首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 typeof 用法
Dec 28 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
js倒计时显示实例
Dec 11 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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
磁盘分区(1) FTP服务器(1) 对撞机(1) .NET Framework(2) 粒子对撞机(1) GZIP(2) DBLink(1) 界面设计(1) IIS7(1) DNS服务器(2)
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php截取中文字符串函数实例
2015/02/23 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（中）
2017/06/11 PHP
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
零基础学Python（一）Python环境安装
2014/08/20 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
face++与python实现人脸识别签到（考勤）功能
2019/08/28 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python打开文件的方式有哪些
2020/06/29 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
英国的屈臣氏：Boots博姿
2017/12/23 全球购物
澳大利亚墨尔本的在线时装店：LORETA
2018/09/14 全球购物
生日主持词
2014/03/20 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
革命电影观后感
2015/06/18 职场文书
python基础入门之普通操作与函数（三）
2021/06/13 Python