zoukankan      html  css  js  c++  java
  • Bootstrap入门(十八)组件12:徽章与巨幕

    Bootstrap入门(十八)组件12:徽章与巨幕

    1.徽章

    2.巨幕

    1.徽章

    给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。

    首先,引入CSS文件

    <link href="bootstrap.min.css" rel="stylesheet">

    我们需要创建一个容器div,让它承载这个徽章

    (<a><button>都可以使用)

        <div class="container">
                <a href="#">短信消息<span class="badge">30</span></a>
                <button class="btn btn-success" type="button">message<span class="badge">30</span></button>
            </div>

    效果

    当然,也会留意到,<button>内其中一个class属性为btn-success,这是指定样式的

    自然,如果我们使用其他样式,会有不同的效果。

    但是,徽章的效果在IE 8中可能不会被支持,要注意使用。

    那么,他能不能放在列表当中呢?

    答案是可以。

    我们来新增代码:

    (假设第一个选中)

         <ul class="nav nav-pills">
                <li role='presentation' class="active"><a href="#">home<span class="badge">30</span></a></li>
                <li role='presentation'><a href="#">123<span class="badge">30</span></a></li>
                <li role='presentation'><a href="#">234<span class="badge">30</span></a></li>
            </ul>

    效果:

    2.巨幕

    这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。

    这是我们在网站中常见的,能够突出文字内容,吸引眼球。

    把他放在刚刚代码的上面,在容器div放在一个class为jumbotron的div当中

           <div class='jumbotron'>
                <div class='container'>  
    <h1>hello world</h1> <p>1234567890</p> <p><a class='btn btn-info btn-lg' href="#" role='button'>hello world</a></p> </div> </div>

    整体效果

  • 相关阅读:
    C++STL之vector用法总结
    [ZOJ 4016] Mergable Stack
    [ZOJ 4024] Peak
    关于C++中ios::sync_with_stdio(false)
    [CodeForces 567C] Geometric Progression
    [CodeForce 450A] Jzzhu and Children
    c++的动态绑定和静态绑定及多态的实现原理(摘)
    C++创建对象的3种方式(转载)
    C++虚函数与纯虚函数用法与区别
    C++深入理解虚函数
  • 原文地址:https://www.cnblogs.com/hnnydxgjj/p/5886585.html
Copyright © 2011-2022 走看看