bootstrap网页框架的使用方法


Posted in Javascript onMay 10, 2016

本文为大家分享了网页框架bootstrap的简单使用方法,供大家参考,具体内容如下

直接百度bootstrap可以搜到bootstrap中文网站,然后最好建议选择下载源码。

下载完成后,将dist/css/bootstrap.min.css复制到项目的根目录下。

具体的模块介绍和使用在中文网站上都有讲述,这里以制作的一个简单示例为例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用bootStrap进行响应式布局</title>
  <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>

<!--导航条-->
<!--class中"navbar navbar-default是默认的颜色,而navbar-fixed-top是取消导航栏的圆角效果,role可以不要"-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

  <!--添加<div class="container"></div>是为了让界面有居中的效果-->
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">ProjectName</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-success" onclick="signin()">Sign in</button>
        <script>
          <!--这里是登录按钮的方法实现,可以根据需要自定义-->
          function signin(){

            alert("点击了登录");
          }

        </script>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--巨幕-->

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 </p>

    <!-- btn-primary是对按钮外观样式的调整 btn-lg是对按钮样式的设定 btn-lg代表按钮的大小类型 其中 &raque是尖角号">>"-->
    <p><a class="btn btn-primary btn-lg" href="http://www.baidu.com" role="button">更多内容 »</a></p>

  </div>
</div>
<div class="container">

  <div class="row">
    <div class="col-md-4">
      <h2>Heading1</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="btton">View details »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading2</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="button" href="http://www.baidu.com">跳转到百度 »</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading3</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="button">View details »</a></p>
    </div>
  </div>
  <hr/>
  <foot>
    <!--"©"是 © 符号-->
    <p>©company2014</p>
  </foot>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
json 定义
Jun 10 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
详解React-Todos入门例子
Nov 08 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
jQuery的文档处理程序详解
May 10 #Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 #Javascript
jQuery对象与DOM对象转换方法详解
May 10 #Javascript
jQuery对象的链式操作用法分析
May 10 #Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 #Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
You might like
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
微信小程序实现蓝牙打印
2019/09/23 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Django配置文件代码说明
2019/12/04 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
SQL Server面试题
2016/10/17 面试题
硕士研究生求职自荐信范文
2014/03/11 职场文书
家长通知书家长评语
2014/04/17 职场文书
演讲稿格式
2014/04/30 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
毕业欢送会致辞
2015/07/29 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang