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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
JSON获取属性值方法代码实例
Jun 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
php SQL防注入代码集合
2008/04/25 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php cli配置文件问题分析
2015/10/15 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
Javascript的一种模块模式
2008/03/22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
财务管理专业毕业生求职信
2014/06/02 职场文书
婚礼父母答谢词
2015/01/04 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python