HTML bootstrap片段消息

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML bootstrap片段消息相关的知识,希望对你有一定的参考价值。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <a href="#" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-search"></i> Search</a>
        <a href="#" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-gears"></i> Settings</a>
    </div>
    <div class="row">
        <div class="conversation-wrap col-md-3">
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"  style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_2.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Michael clarkt</h5>
                    <small class="text-muted">Lorem ipsum dolor...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"  style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_1.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Pauline mothg</h5>
                    <small class="text-muted">Cras commodo...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_3.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Manuel mcKlein</h5>
                    <small class="text-muted">Cras sit amet...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/User_for_snippets.png">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Markt prame</h5>
                    <small class="text-muted">Morbi felis...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user-453533-fdadfd.png">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Bort snudert</h5>
                    <small class="text-muted">Vivamus semper...</small>
                </div>
            </div>

            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/HexGames349.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Maria monthg</h5>
                    <small class="text-muted">cursus ac...</small>
                </div>
            </div>
        </div>



        <div class="message-wrap col-md-8">
            <div class="msg-wrap">
                <div class="media msg ">
                    <a class="pull-left" href="#">
                        <img class="media-object    img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis, augue sed euismod varius, nisl metus vestibulum neque, nec dictum est dui et tellus</small>
                    </div>
                </div>
                <div class="alert alert-info msg-date">
                    <strong>Today</strong>
                </div>
                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object   img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Interdum et malesuada fames ac ante ipsum primis in faucibus. In at lacus ac velit vehicula elementum at a lorem. Nullam quis augue sodales, porttitor orci non"</small>
                    </div>
                </div>

                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object  img-circle" data-src="holder.js/64x64" alt="64x64" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">consectetur dui. Quisque lacinia vitae lectus placerat dictum. Integer tristique sem a risus egestas, ac accumsan ligula volutpat. Donec at convallis elit"</small>
                    </div>
                </div>

                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Cras commodo ante sit amet nulla porta, sed feugiat lectus accumsan. Maecenas luctus est sed dignissim mattis. Mauris ullamcorper hendrerit est in pharetra text-muted"</small>
                    </div>
                </div>
            </div>

            <div class="send-wrap ">
                <textarea class="form-control send-message" rows="3" placeholder="Write a reply..."></textarea>
            </div>
            <div class="btn-panel">
                <button class="btn btn-success" role="button">
                    <i class="fa fa-share"></i> Send Message
                </button>
            </div>
        </div>
    </div>
</div>                

<style>

.conversation-wrap{
    box-shadow: -2px 0 3px #ddd;
    padding:0;
    max-height: 400px;
    overflow: auto;
}

.conversation{
    padding:5px;
    border-bottom:1px solid #ddd;
    margin:0;

}

.message-wrap{
    box-shadow: 0 0 3px #ddd;
    padding:0;

}

.msg{
    padding:5px;
    margin:0;
}

.msg-wrap{
    padding:10px;
    max-height: 400px;
    overflow: auto;
}

.time{
    color:#bfbfbf;
}

.send-wrap{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding:10px;
}

.send-message{
    resize: none;
}

.highlight{
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
}

.send-message-btn{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;
}

.msg-wrap .media-heading{
    color:#003bb3;
    font-weight: 700;
}

.msg-date{
    background: none;
    text-align: center;
    color:#aaa;
    border:none;
    box-shadow: none;
    border-bottom: 1px solid #ddd;
}
                
</style>

BootStrap有用代码片段(持续总结)

> 如题。持续总结自己在使用BootStrap中遇到的问题。并记录解决方法。希望能帮到须要的小伙伴

1、bootstrap上下布局。顶部固定下部填充

应用场景:经典上下布局中,顶部导航条固定,下部填充不显示滚动栏
解决方式:导航条固定在顶部。同一时候为body设置内边距(padding-top),内边距为导航条高度(默认50px。可自己调整高度),html代码例如以下:

<!--html页面布局-->
<div class="container-fluid page-wrapper">
    <!--导航栏-->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!--logo图标-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">
                    <span class="sr-only">切换导航条</span> <span class="icon-bar"></span>
                    <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">
                    <img src="images/logo_2.png" alt="">
                </a>
            </div>
            <!--导航栏菜单-->
            <div class="collapse navbar-collapse" id="myMenu">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html" style="">主页</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="modal">河道网站</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="modal">水库网站</a>
                    </li>
                    <li>
                        <a href="#">气象网站</a>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="modal">1小时降雨</a>
                            </li>
                            <li>
                                <a href="#">3小时降雨</a>
                            </li>
                            <li>
                                <a href="#">24小时降雨</a>
                            </li>

                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" id="datetimepicker" class="form-control" placeholder="选择日期">
                    </div>
                    <button type="button" class="btn btn-default">确定</button>
                </form>
            </div>
        </div>
    </div>
    <!--地图窗体-->
    <div class="container-fluid" id="map"></div>
</div>

</body>
</html>

CSS代码:

*{
margin:0;
padding:0;
border:0;
}
html, body{
height:100%;
width:100%;
overflow:hidden;
}
body{
padding-top:50px;
}
.page-wrapper{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#map{
width:100%;
height:100%;
}

实现效果:
技术分享

2、改动默认导航条背景色、字体样式大小颜色等

  • 应用场景:bootstrap提供了两种导航条(default、inverse),可是经常须要调整背景色以及字体样式。
  • 解决方式:使用CSS类选择器、后代选择器、子元素选择器以及伪类选择器
    W3CSchool具体解说,经常使用的是自己定义导航菜单字体大小以及鼠标悬浮字体颜色或大小改变,CSS代码演示样例:
.navbar-nav li{
font:微软雅黑;
font-size:20px;
font-weight:bolder;
font-style:normal;
color:#d58512;
padding:0px;
margin:0;
text-align:center;
margin-left:10px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
color:#2a68ff;
}

相同。改动其它组件默认样式也是相同的方式,要熟练运用CSS各种选择器,这里我自己的一点技巧就是,在chrome中查看网页源码。直接改动CSS文件可马上看到改动后的效果,自己感觉合适了,再替换源码里的CSS部分就可以。例如以下图所看到的:
技术分享





以上是关于HTML bootstrap片段消息的主要内容,如果未能解决你的问题,请参考以下文章

html 使用Bootstrap 3验证错误消息

css Bootstrap 3进度条片段

BootStrap实用代码片段(持续总结)

Bootstrap -- 插件: 提示工具弹出框 警告框消息

代码适用于与单个 html 文件不同的堆栈片段

终于懂了:Delphi重定义消息结构随心所欲,只需要前4个字节是消息编号就行了,跟Windows消息虽然尽量保持一致,但其实相互没有特别大的关系。有了这个,就有了主动,带不带句柄完全看需要。(代码片段