当前位置: 首页 > 编程笔记 >

学做Bootstrap的第一个页面

冉弘化
2023-03-14
本文向大家介绍学做Bootstrap的第一个页面,包括了学做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学习教程》

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

 类似资料:
  • 主要内容:HTML 代码接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.xnip.cn/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 <div class="jumbotron text-center" style="margin-bottom:0"> <h1>我的第一个 Bootstrap

  • 目前正在用C#中的ITextSharp构建一个PDF。PDF由三个“部分”组成,一个封面,一个可以跨越多个页面的表格,以及一个最终页面。拥有该表的页面需要在第一页包含页眉,并在所有包含页眉的页面上包含页脚,但封面和最后一页不需要。 我使用XMLWorker构建页面,但这并不重要。构建页面的代码如下: 我遇到的麻烦是确定一种方法来防止页脚出现在结束页上。我正在重写OnEndPage以创建页脚。是否有

  • 这篇文档将带你快速创建一个 MIP 页面。 1. 创建 HTML 文件 首先创建一个标准的 HTML 文件,注意: 在 <html> 标签中增加 mip 属性标识。 编码为 utf-8 。 添加 meta-viewport,用于移动端展现。 <!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="

  • 本文向大家介绍学习使用Bootstrap页面排版样式,包括了学习使用Bootstrap页面排版样式的使用技巧和注意事项,需要的朋友参考一下 Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 We

  • 柱形图是一种最简单的可视化图标,主要有矩形、文字标签、坐标轴组成。本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图。 画布是什么 前几章的处理对象都是 HTML 的文字,没有涉及图形的制作。 要绘图,首要需要的是一块绘图的“画布”。 HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。 SVG 是什么 SVG,指可缩放矢量图形(Scalable Vec

  • 问题内容: 我在一个名为的页面中有一个锚点,但在获取Bootstrap模式以显示另一个名为的页面中的数据时遇到了麻烦。 menu.html Lab6.html 我做错什么了吗? 问题答案: 更新资料 您尝试从另一个页面获取模式内容的方式不正确。 根据Bootstrap的文档: 如果提供了远程URL,则将通过jQuery的load方法加载一次内容并将其注入div中。如果您使用的是data- api,