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的loading 加载提示效果实现代码
Sep 01 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
vue axios用法教程详解
Jul 23 Javascript
Node.js简单入门前传
Aug 21 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
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php生成HTML文件的类方法
2019/10/11 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
简单的php购物车代码
2020/06/05 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
收集的几个Python小技巧分享
2014/11/22 Python
Python多进程机制实例详解
2015/07/02 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
如何用python免费看美剧
2020/08/11 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
小学科学教学反思
2014/01/26 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
学生安全责任书
2014/04/15 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
童年读书笔记
2015/06/26 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书