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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
Javascript 面向对象 继承
May 13 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
一个SQL管理员的web接口
2006/10/09 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python实现Linux中的du命令
2017/06/12 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Python中and和or如何使用
2020/05/28 Python
韩国11街:11STREET
2018/03/27 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
劳资协议书范本
2014/04/23 职场文书
学校火灾防控方案
2014/06/09 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
学校端午节活动方案
2014/08/23 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python