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初识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
vue选项卡切换的实现案例
Apr 11 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 iconv函数的使用详解
2013/06/09 PHP
浅析PHP绘图技术
2013/07/03 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
javascript轮播图算法
2016/10/21 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
应届毕业生求职信
2013/11/30 职场文书
满月酒答谢词
2014/01/14 职场文书
如何写好自荐信
2014/04/07 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书