移动WEB应用实践：Bootstrap应用实践

最新推荐文章于 2024-02-06 19:11:48 发布

新一88

最新推荐文章于 2024-02-06 19:11:48 发布

阅读量2.4k

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/rowisdom/article/details/17004701

版权

android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介：Bootstrap框架简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。在这里将以最简洁的方式介绍Bootstrap框架的各个组件的实践示例。

Bootstrap组件：

Bootstrap Modal-Bootstrap模态框
Bootstrap tooltip-Bootstrap弹出框

一、Bootstrap Modal实践：

文档：Bootstrap Modal.htm

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Bootstrap Modal</title>

<!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">


  </head>
  <body>

    <!-- sample modal content -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="bs-example" style="padding-bottom: 24px;">
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
    </div><!-- /example -->

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>

自定义BOOTSTRAP框架Modal的宽高和显示位置，请访问：http://qoophp.com/archives/187
源码下载： http://download.csdn.net/detail/rowisdom/6624741