zoukankan      html  css  js  c++  java
  • bootstrap

    Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.
    
    Copy the HTML below to begin working with a minimal Bootstrap document.
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.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="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

    文档 https://getbootstrap.com/docs/3.3/getting-started/

    text-left

    text-right

    text-center

    text-lowercase

    text-uppercase

    <table class="table table-striped table-borderd "/>

        <tr class="success">

        <tr class="active">

      

    <div class="form-group has-success">  // has-success用来控制内部的label边框颜色之列

        <label for="" class="control-label">label</label>  // control-label和has-success匹配

        <input type="text" class="form-control input-lg" placeholder="txt">   input-lg//大小设置

    <button class="btn btn-default">

    <button class="btn btn-success">

    <button class="btn btn-primary active">  //active会有按下去的效果

    <button class="btn btn-warning btn-block">  //btn-block变成全屏按钮的大小

    <button class="btn btn-danger " disabled="disabled"> //禁用效果

    <button class="btn btn-link">

     文档地址

    https://getbootstrap.com/docs/3.3/javascript/

    栅格布局

    <div class="container">
        <div class="row">
            <div class="col-md-4"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="100%;
        height:auto;"></div>
            <div class="col-md-4"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="100%;
        height:auto;"></div>
            <div class="col-md-4"><img src="http://t1.27270.com/uploads/tu/201812/121/3a5037c2c3.jpg" style="100%;
        height:auto;"></div>
        </div>
    </div>   

    <hr class="divider">

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

    <!-- Nav tabs -->
    <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="100%;
    height:auto;"></div>
    <div role="tabpanel" class="tab-pane" id="profile"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="100%;
    height:auto;"></div>
    <div role="tabpanel" class="tab-pane" id="messages"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="100%;
    height:auto;"></div>
    <div role="tabpanel" class="tab-pane" id="settings"><img src="http://t1.27270.com/uploads/tu/201812/121/3a5037c2c3.jpg" style="100%;
    height:auto;"></div>
    </div>

    https://getbootstrap.com/docs/3.3/javascript/

    https://getbootstrap.com/docs/3.3/components/#nav-pills

  • 相关阅读:
    Topcoder SRM656div1 250 ( 期望DP )
    SCAU 2015 GDCPC team_training1
    第五次群赛暨清明节专场
    HDU 2783 You’ll be Working on the Railroad(最短路)
    HDU 4013 Distinct Subtrees(树的最小表示)
    HDU 4014 Jimmy’s travel plan(图计数)
    SCAU 2015 GDCPC team_training0
    HDU 1024 Max Sum Plus Plus (递推)
    UVA 12849 Mother’s Jam Puzzle( 高斯消元 )
    HDU 4285 circuits( 插头dp , k回路 )
  • 原文地址:https://www.cnblogs.com/agang-php/p/10168980.html
Copyright © 2011-2022 走看看