bootstrap 入门


利用一些现有的框架,写东西,还是比较轻松的。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
 
  <!-- Bootstrap -->
  <link href="css/bootstrap.css" rel="stylesheet">
 
  <link href="css/ge.css" rel="stylesheet">
 
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
 
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#example-navbar-collapse">
      <span class="sr-only">切换导航</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">菜鸟教程</a>
  </div>
 
  <div class="collapse navbar-collapse" id="example-navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">iOS</a></li>
      <li><a href="#">SVN</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">jmeter</a></li>
          <li><a href="#">EJB</a></li>
          <li><a href="#">Jasper Report</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
          <li class="divider"></li>
          <li><a href="#">另一个分离的链接</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</nav>
 
 
<div class="container">
  <div class="row">
    <div class="col-md-9" style="background:#ccc;">
      <h1 class="text-center">大数据时代来临!</h1>
      <div>
        头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的头条的 more
      </div>
      <div class="row">
        <div class="col-md-3"><img class="img-responsive" src="http://yj09.com/etjy/upfiles/article/201302/1361614829635838872.png"></div>
        <div class="col-md-3"><img class="img-responsive" src="http://yj09.com/etjy/upfiles/article/201302/1361614829635838872.png"></div>
        <div class="col-md-3"><img class="img-responsive" src="http://yj09.com/etjy/upfiles/article/201302/1361614829635838872.png"></div>
        <div class="col-md-3"><img class="img-responsive" src="http://yj09.com/etjy/upfiles/article/201302/1361614829635838872.png"></div>
      </div>
      <div class="row">
      </div>
    </div>
    <div class="col-md-3" style="background:#666;">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
 
  </div>
 
 
 
  <h1>Hello, world!</h1>
  <div class="row">
    <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第一列</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第二列 - 分为四个盒子</h4>
      <div class="row">
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Consectetur art party Tonx culpa semiotics. Pinterest
            assumenda minim organic quis.
          </p>
        </div>
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
        <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

如果你是一名技术人员可加我QQ 2651-0442-02,如果你是java技术人还可以加入QQ群 1784-9136-0
你将得到的不仅仅是技术的交流,还有职业机会,人生解惑.
首发地址:月小升博客http://java-er.com/blog/bootstrap-rumen/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
此条目发表在 WEB前端 分类目录,贴了 , 标签。将固定链接加入收藏夹。
既然来了,就评论一下,不会怀孕的

bootstrap 入门》有 2 条评论

  1. 业余草 说:

    文章不是很好啊,全是代码!
    http://www.xttblog.com

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">