码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap4 入门

时间:2018-02-14 01:01:06      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:har   fit   img   基本   ann   value   http   future   logs   

http://www.runoob.com/bootstrap4/bootstrap4-navs.html

共五个部分

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">
    <title>bootstrap入门2</title>
    <link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">
    <script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>  
    <script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>
<body>
    <div class="container">
        <h1>前端你好</h1>
        <p>bootstrap你好</p>

    <h1>分列</h1>
    <div class="row" style="background-color:#ffd;">
        <div class="col-sm-4" style="background-color:#eaf;">
            <div class="container">
                <h1>11111</h1>
                <h2>222</h2>
                <h3>333</h3>
                <h4>4444</h4>
                <h5>55555</h5>
                <h6>666666</h6>
            </div>
        </div>
        <div class="col-sm-4" style="background-color:#1e6;">
            <div class="container">
                <h1><small>small style</small></h1>
                <mark>this is a mark </mark>
                <h3 class="display-2">display-2</h3>
                <h4 class="display-3">display-3</h4>
            </div></div>
        <div class="col-sm-4" style="background-color:#eee;"><div class="container">
                <h1>11111</h1>
                <h2>222</h2>
                <h3>333</h3>
                <h4>4444</h4>
                <h5>55555</h5>
                <h6>666666</h6>
                <abbr title="java EE is  "> java ee</abbr>
                <h2>this is blockquote</h2>
                <blockquote class="blockquote">
                    <p>
                        For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally
                        50年来,wwf一直保护这自然环境。作为世界领先的动物保护组织,来自美国有120万会员,以及全球有将近500万的人为WWF工作。
                    </p>
                    <footer class="bolockquote-footer">from www'website</footer>
                </blockquote>
            </div></div>

    <div class="row">
        <div class="col-sm-3">
            <h2>代表指定意义的文本颜色</h2>
              <p class="text-muted">柔和的文本。</p>
              <p class="text-primary">重要的文本。</p>
              <p class="text-success">执行成功的文本。</p>
              <p class="text-info">代表一些提示信息的文本。</p>
              <p class="text-warning">警告文本。</p>
              <p class="text-danger">危险操作文本。</p>
              <p class="text-secondary">副标题。</p>
              <p class="text-dark">深灰色文字。</p>
              <p class="text-light">浅灰色文本(白色背景上看不清楚)。</p>
              <p class="text-white">白色文本(白色背景上看不清楚)。</p>
        </div>
        <div class="col-sm-3">
             <h2>背景颜色</h2>
              <p class="bg-primary text-white">重要的背景颜色。</p>
              <p class="bg-success text-white">执行成功背景颜色。</p>
              <p class="bg-info text-white">信息提示背景颜色。</p>
              <p class="bg-warning text-white">警告背景颜色</p>
              <p class="bg-danger text-white">危险背景颜色。</p>
              <p class="bg-secondary text-white">副标题背景颜色。</p>
              <p class="bg-dark text-white">深灰背景颜色。</p>
              <p class="bg-light text-dark">浅灰背景颜色。</p>
        </div>
        <div class="col-sm-3"><table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>彭智慧</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>彭衡</td>
                    <td>10</td>
                </tr>
            </tbody></table>
            <table class="table table-bordered">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>彭智慧</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>彭衡</td>
                    <td>10</td>
                </tr>
            </tbody></table></div>
        <div class="col-sm-3">
            <table class="table table-dark table-hover">
                <thead>
                    <tr>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>职位</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>骚薛</td>
                        <td>training</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>马云</td>
                        <td>trade</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>小主</td>
                        <td>String</td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-striped">
                <thead class="thead-light">
                    <tr>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>职位</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>骚薛</td>
                        <td>training</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>马云</td>
                        <td>trade</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>小主</td>
                        <td>String</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        <div class="row">
            <div class="col">
            <table class="table table-bordered table-sm">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
              </tr>
            </tbody>
            </table>
            </div>
            <div class="col">
                <div class="table-responsive">
                <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Sex</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Anna</td>
                    <td>Pitt</td>
                    <td>35</td>
                    <td>New York</td>
                    <td>USA</td>
                    <td>Female</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                  </tr>
                </tbody>
            </table></div>
            </div>
        </div>
    </div>
    
        <table class="table table-hover">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
        </table>
        <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
        </tbody>
    </table>

    </div>
    <div class="container">
        <h1>图片样式例子</h1>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="rounded" alt="圆角图片">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="rounded-circle" alt="rounded-circle">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="img-thumbnail" alt="thumbnail">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3891993913,4222748050&fm=27&gp=0.jpg" class="img-fluid" alt="thumbnail">
        
    </div>

</body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scall=1,shrink-to-fit=no">
    <title>bootstrap入门</title>
    <link rel="stylesheet" type="text/css" href="../../bootstrap-4.0.0-dist/css/bootstrap.css">
    <script type="text/javascript" src="../../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/popper.js"></script>  
    <script type="text/javascript" src="../../bootstrap-4.0.0-dist/js/bootstrap.js"></script>

</head>
<body>
<div class="container">
        <h1>前端你好</h1>
        <p>bootstrap你好</p>
        <div class="jumbotron">
            <h1>jumbotron</h1>
            <p>超大屏幕,有啥卵用?</p>
        </div>  
    <div class="alert alert-success">
     <button type="button" class="close" data-dismiss="alert">&times;</button>
     <strong>成功!</strong></div>

    <h4>Bootstrap4 按钮</h4>
    <div class="container">
        <button type="button" class="btn">基本按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-dark">黑色</button>
        <button type="button" class="btn btn-light">浅色</button>
        <button type="button" class="btn btn-link">链接</button>
    </div>
    <h4>按钮类可用于  a, button, 或 input 元素上:</h4>
    <div class="container">
        <a href="#" class="btn btn-info" role="button">链接按钮</a>
        <button type="button" class="btn btn-info">按钮</button>
        <input type="button" class="btn btn-info" value="输入框按钮">
        <input type="submit" class="btn btn-info" value="提交按钮">
    </div>
    <h4>按钮设置边框</h4>
    <div class="container">
        <button type="button" class="btn btn-outline-primary">主要按钮</button>
        <button type="button" class="btn btn-outline-secondary">次要按钮</button>
        <button type="button" class="btn btn-outline-success">成功</button>
        <button type="button" class="btn btn-outline-info">信息</button>
        <button type="button" class="btn btn-outline-warning">警告</button>
        <button type="button" class="btn btn-outline-danger">危险</button>
        <button type="button" class="btn btn-outline-dark">黑色</button>
        <button type="button" class="btn btn-outline-light text-dark">浅色</button>
    </div>
    <h4>不同大小的按钮</h4>
    <div class="container">
        <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
        <button type="button" class="btn btn-primary">默认按钮</button>
        <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
    </div>

    <h4>块级按钮</h4>
    <div class="container">
        <button type="button" class="btn btn-primary btn-block">按钮 1</button>
    </div>
    <h4>激活和禁用的按钮</h4>
    <div class="container">
        <button type="button" class="btn btn-primary active">点击后的按钮</button>
        <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
        <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
    </div>
    <h2>Bootstrap4 按钮组</h2>
    <div class="container">
    <h4>水平按钮组</h4>
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <button type="button" class="btn btn-primary">Sony</button>
        </div>
    <h4>垂直按钮组</h4>
        <div class="btn-group-vertical">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <button type="button" class="btn btn-primary">Sony</button>
        </div>
    <h4>内嵌按钮组 | 下拉菜单</h4>
    <div class="container">
        <div class="btn-group">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
               Sony
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Tablet</a>
              <a class="dropdown-item" href="#">Smartphone</a>
            </div>
          </div>
        </div></div>
    <h4>垂直按钮组及下拉菜单</h4>
    <div class="container">
        <div class="btn-group-vertical">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
               Sony
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Tablet</a>
              <a class="dropdown-item" href="#">Smartphone</a>
            </div>
          </div>
        </div></div>
    <h2>Bootstrap4 徽章(Badges)</h2>
    <h6>测试标题<span class="badge badge-success">New</span></h6>
    <h6>测试标题<span class="badge badge-secondary">New</span></h6>
    <h6>测试标题<span class="badge badge-dark">New</span></h6>
    <h5>测试标题<span class="badge badge-primary">New</span></h5>
    <h4>测试标题<span class="badge badge-danger">New</span></h4>
    <h3>测试标题<span class="badge badge-warning">New</span></h3>
    <h2>测试标题<span class="badge badge-info">New</span></h2>
    <h1>测试标题<span class="badge badge-light">New</span></h1>
    <h4>药丸型徽章</h4>
    <span class="badge badge-pill badge-default">默认</span>
    <span class="badge badge-pill badge-primary">主要</span>
    <span class="badge badge-pill badge-success">成功</span>
    <span class="badge badge-pill badge-info">信息</span>
    <span class="badge badge-pill badge-warning">警告</span>
    <span class="badge badge-pill badge-danger">危险</span>
    </div>
    <h4>徽章嵌入元素</h4>
    <button type="button" class="btn btn-primary">
      Messages <span class="badge badge-success">4</span>
    </button>
</div>
</body>
</html>

3

4

5

Bootstrap4 入门

标签:har   fit   img   基本   ann   value   http   future   logs   

原文地址:https://www.cnblogs.com/humi/p/8447791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!