zoukankan      html  css  js  c++  java
  • bootstrap-巨幕、缩略图、警告框

    巨幕:

    <div class="jumbotron">
        <div class="container">
            <h1>W3School</h1>
            <p>好好学习好好学习天天向上好好学习天天向上好好学习天天向上</p>
            <p><a href="#" class="btn btn-primary">确定</a></p>
        </div>
    </div>

    图:

    缩略图:

    <!-- 
        thumbnail            缩略图
    -->
    <div class="container">
        <div class="row">
            <div class="col-lg-2">
                <a href="www.baidu.com" class="thumbnail">
                    <img src="user_photo.png" />
                </a>
            </div>
            <div class="col-lg-2">
                <a href="www.baidu.com" class="thumbnail">
                    <img src="user_photo.png" />
                </a>
            </div>
        </div>
    
        <!--还可以把thumbnail给父级会有不同的样式 -->
        <div class="row" style="margin-top:20px">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="user_photo.png" />
                    </a>
                    <div class="caption">    
                        <h3>W3School</h3>
                        <p>各种知识点在这里找得到</p>
                        <p>
                            <a href="#" class="btn btn-primary">查看</a>
                            <a href="#" class="btn btn-danger">删除</a>
                        </p>
                    </div>    
                </div>    
            </div>
        </div>
    </div>

    图:

    警告框:

    <div class="container">
        <div class="row">
            <p class="alert alert-success">这是一个警告框!
                <button class="close" data-dismiss="alert">&times</button>
            </p>
            <p class="alert alert-info">这是一个警告框!</p>
            <p class="alert alert-danger">出错!</p>
            <p class="alert alert-warning">这是一个警告框!</p>
            <p class="alert alert-success">这是一个警告框!</p>
        </div>
    </div>

    图:

    另一个警告框:

    <div class="row">
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button class="close" data-dismiss="alert">&times</button>
                <strong>警告!</strong> 检测到您当前使用的IE浏览版版本过低,可能会带来不好的体验,请使用<a href="#" class="alert-link">更高级版本的浏览器。</a>
            </div>
        </div>

  • 相关阅读:
    ASP.NET 如何取得 Request URL 的各個部分
    正则表达式
    sql server 存储过程中拼接sql,转义单引号
    C# 过滤敏感字符
    Facebook “Invite” 弹出窗口
    Silverlight 4 动态换Theme
    silverlight 4 com组件调用
    Silverlight 4 COM+ 操作支持示例集
    如何创建silverlight离开浏览器的应用程序
    Silverlight 4 的 WCF NET.TCP 协议
  • 原文地址:https://www.cnblogs.com/tenWood/p/6139758.html
Copyright © 2011-2022 走看看