巨幕和徽章

来源：互联网发布：ios和mac 编辑：程序博客网时间：2024/04/30 05:15

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="bootstrap.min.css">    <title>徽章和巨幕</title></head><body>    <div class="jumbotron">        <div class="container">            <h1>Hello,World!!</h1>            <p>努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money努力成为全栈工程师，努力make money</p>            <p><a class="btn btn-success btn-lg" href="#">学习更多</a></p>        </div>    </div>    <div class="container">        <a href="#">短信消息<span class="badge">30</span></a>        <button class="btn btn-info" type="button">Message<span class="badge">100</span></button>    </div>    <ul class="nav nav-pills">        <li role="presentation"><a href="#" class="active">Home<span class="badge">50</span></a></li>        <li role="presentation"><a href="#">Profile<span class="badge">5000</span></a></li>        <li role="presentation"><a href="#">Message<span class="badge">500</span></a></li>    </ul></body></html>

0 0