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获取注册信息并提示实现代码
Apr 21 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
JS中数组重排序方法
Nov 11 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
js实现表格数据搜索
Aug 09 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 超链接 抓取实现代码
2009/06/29 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
js html实现计算器功能
2018/11/13 Javascript
js实现左右轮播图
2020/01/09 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
答题辅助python代码实现
2018/01/16 Python
python中的print()输出
2019/04/12 Python
python如何实现数据的线性拟合
2019/07/19 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python程序慢的重要原因
2020/09/04 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
无故旷工检讨书
2014/01/26 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
教师工作总结范文2014
2014/11/10 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Python进行区间取值案例讲解
2021/08/02 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
4种方法python批量修改替换列表中元素
2022/04/07 Python