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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
拖动时防止选中
Feb 03 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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生成静态HTML文档的原理
2012/10/29 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
简单学习Python time模块
2016/04/29 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python重试装饰器的简单实现方法
2019/01/31 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
大专自我鉴定范文
2013/10/01 职场文书
工程师求职简历的自我评价分享
2013/10/10 职场文书
自荐书封面下载
2013/11/29 职场文书
歌唱比赛主持词
2014/03/18 职场文书
大学生简历求职信
2014/06/24 职场文书
出售房屋协议书范本
2014/10/06 职场文书
安全教育培训心得体会
2016/01/15 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python