学做Bootstrap的第一个页面

本文实例分享了第一个Bootstrap页面的实现代码,供大家参考,具体内容如下

效果图:

实现代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" /><!--为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。-->
  <title></title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
   <script src="js/bootstrap.min.js"></script>
   <style>
    .masthead{
     padding: 110px 0px 110px;
     margin-bottom: 0px;
    }
    .masthead:after{
     content: '';
     display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: url(img/bg1.png) repeat center center;
     opacity: 0.4;
    }
    .masthead h1{
     font-weight: 700;
     font-size: 700%;
    }
    .active{font-size: 120%;font-weight: bold;}
    .masthead-a{
     opacity: 0.5;
     color: white;
     font-size: medium;
    }
    .masthead-a:hover{
     color: white;
     opacity: 1;
    }
    .modal-header li i{opacity: 0.5;}
    .text-align{
     display: inline;
    }
    .img-ls{
     width: 23%;
     border: 1px solid hsl(0, 0%, 87%);
     margin-right: 2%;
     padding: 4px 0px;
     margin-bottom: 6%;
     min-height: 350px;
     max-height: 600px;
     float: left;
    }
    .img-ls img{
     width: 97%;
     height: auto;
    }
    .img-ls img:hover{
     cursor: pointer;
    }
    .footer{
     padding: 50px 50px;
    }
    .navbar-nav li{display: inline;}
   </style>
 </head>
 <body>
  <div class="navbar-inverse navbar-fixed-top">
  <!-- 定义个内部框架表现的基调,位置大小背景等 -->
    <div class="container">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <ul class="nav navbar-nav"><li><a href="#" class="active">Bootstrap中文网</a></li></ul>
     <div class="navbar-collapse collapse" role="navigation">
      <ul class="nav navbar-nav">
       <li><a href="#">Bootstrap2中文文档</a></li>
       <li><a href="#">Bootstrap3中文文档</a></li>
       <li><a href="#">Bootstrap 4.0 预览</a></li>
       <li><a href="#">Less 教程</a></li>
       <li><a href="#">jQuery API</a></li>
       <li><a href="#">网站实例</a></li>
       <li><a href="#">前端高薪职位</a></li>
       <li><a href="#">关于</a></li>
      </ul>
     </div>
    </div>
  </div>
  <div class="jumbotron masthead">
    <div class="container">
     <h1>Bootstrap</h1>
     <h2>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</h2>
     <p><a class="btn btn-lg btn-primary" href="#">Bootstrap3中文文档(v3.3.5)</a></p>
     <p><a href="#" class="masthead-a">Bootstrap2中文文档(v2.3.2)</a></p>
    </div>
  </div>
  <div class="modal-header text-center">
   <div class="container">
    <ul>
     <li class="text-align">Bootstrap技术交流群:318630708 <i>|</i> </li>
     <li class="text-align">Bootstrap问答社区 <i>|</i> </li>
     <li class="text-align">新浪微博:@Bootstrap中文网</li>
    </ul>
   </div>
  </div>
  <div class="modal-header">
   <div class="container">
    <div class="page-header text-center">
     <h2>Bootstrap相关优质项目推荐</h2>
     <p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/codeguide.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">Bootstrap 编码规范<br/><small>by @mdo</small></a>
     </h3>
     <p class="modal-body">
      Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/jqueryapi.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">jQuery API <br/><small>中文手册</small></a>
     </h3>
     <p class="modal-body">
      根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/w3schools.png" />
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">w3schools<br/><small>原版国内镜像</small></a>
     </h3>
     <p class="modal-body">
      w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!
     </p>
    </div>
    <div class="img-ls col-lg-3 text-center">
     <img src="img/expo.png"/>
     <h3>
      <a href="javascript:void(0)" class="btn btn-lg">优站精选<br/><small>Bootstrap网站实例</small></a>
     </h3>
     <p class="modal-body">
      Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
     </p>
    </div>
   </div>
  </div>
  <footer class="footer">
   <div class="container modal-header">
    <div class="col-lg-6">
     <img src="img/logo.png" />
     <h5>
      <p>本网站所列开源项目的中文版文档全部由<a href="javascript:void(0)"><small>Bootstrap中文网</small></a>成员翻译整理,并全部遵循 <a href="javascript:void(0)"><small>CC BY 3.0</small></a>协议发布。</p>
     </h5>
    </div>
    <div class="col-lg-6">
     <div class="col-xs-3">
      <h4>关于</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>关于我们</small></a></li>
        <li><a href="javascript:void(0)"><small>广告合作</small></a></li>
        <li><a href="javascript:void(0)"><small>友情链接</small></a></li>
        <li><a href="javascript:void(0)"><small>招聘</small></a></li>
       </ul>
      </h4>
     </div>
     <div class="col-xs-3">
      <h4>联系方式</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>新浪微博</small></a></li>
        <li><a href="javascript:void(0)"><small>电子邮件</small></a></li>
       </ul>
      </h4>
     </div>
      <div class="col-xs-3">
      <h4>旗下网站</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>Laravel中文网</small></a></li>
        <li><a href="javascript:void(0)"><small>Ghost中国</small></a></li>
       </ul>
      </h4>
     </div>
      <div class="col-xs-3">
      <h4>赞助商</h4>
      <h4>
       <ul class="list-unstyled">
        <li><a href="javascript:void(0)"><small>UCloud</small></a></li>
        <li><a href="javascript:void(0)"><small>又拍云</small></a></li>
       </ul>
      </h4>
     </div>
    </div>
   </div>
   <h4 class="text-center "><a href="javascript:void(0)"><small>京ICP备11008151号</small></a><small> | 京公网安备11010802014853</small></h4>
  </footer>
 </body>
</html>

相信大家一定还没过瘾吧,下面再为大家分享几篇文章:

《值得分享和收藏的Bootstrap学习教程》 《Bootstrap学习教程》

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

(0)

相关推荐

  • 下一代Bootstrap的5个特点 超酷炫!

    Bootstrap 4的初始版已经发布很久,还是希望大家都可以认识到,这是对这个流行的(可能是最流行的)响应式CSS框架一次重大的彻底整修.该项目创始人,Mark Otto说这次的发布"几乎涉及每一行代码",这并不是在开玩笑. 1.更轻巧的文件大小  有这样一句话,"删掉的代码必定是已经调试过的代码,"--最好的重构一定会导致项目删除大量代码,迅速瘦身.如果你下载初始版本,那么你会发现,与最新的稳定版本Bootstrap 3(3.3.5)--约为123KB大小(bo

  • 开启BootStrap学习之旅

    本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习.这里有我对VS2013更新的简要介绍,有兴趣的话你可以看一眼Visual Studio 2013更新内容简介 bootstrap深受广大屌丝喜爱的原因到底是什么呢 1.

  • Bootstrap4一次重大更新 几乎涉及每行代码

    对Bootstrap来说去年8月19日是个特别的日子--不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子.Bootstrap 4是一次重大更新,几乎涉及每行代码. 1.新增功能 Bootstrap 4中有太多重大的更新,本文不能面面俱到,下面是一些颇受关注的亮点: 从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中.得益于Libsass,Bootstrap的编译速度比以前更快: 改进网格系统:新增一个网格层适配移动设备,并整顿语义

  • bootstrap3 兼容IE8浏览器!

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap都已经预先定义好了,当我们制作网页上,只需直接调用里面的css即可 bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览

  • Bootstrap3制作自己的导航栏

    导航栏是一个很好的功能,是Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

  • Bootstrap安装环境配置教程分享

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 一.下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. D

  • 20分钟打造属于你的Bootstrap站点

    本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍: 基本的HTML模板  .我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来.下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html. <!DOCTYPE html> <head> <title>Twitter Bootstrap Tutorial - A re

  • 论Bootstrap3和Foundation5网格系统的异同

    Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上.它们都提供了随时可用的组件,加快了我的工作流程.除了一些细小差别,在我看来它们大部分的基本特征都是类似. 在这篇文章里,我将介绍它们网格的基本构造.首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异.然后,我将通过一个真实例子的实践来帮助你增添知识. 让我们一起开始吧! 比较一:媒体查询的比较 在分析Bootstrap和Foundation的栅格结构之前,让

  • 使用bootstrap3开发响应式网站

    本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

随机推荐