Bootstrap组件之页头、缩略图

.page-header——指定div元素包裹页头组件;

<div class="page-header">
        <h1>小镇菇凉<small> 2小时前</small></h1>
    </div>

.thumbnail——指定元素包裹缩略图组件

    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="images/937654.jpg">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
                <img src="images/937654.jpg">
                <div class="caption">
                    <h4>第15届上海校花评比大赛</h4>
                    <p>这是上海复旦大学德语专业的大三学生,她的名字叫韩诗意!</p>
                    <p class="text-right">
                        <a href="#" class="btn btn-default">不喜欢</a>
                        <a href="#" class="btn btn-primary">喜欢</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-17 09:18:40

Bootstrap组件之页头、缩略图的相关文章

Bootstrap(9) 巨幕页头缩略图和警告框组件

一.巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>这是一个学习性的网站!</p> <p> <a href="#" class="btn btn-default">更多内容<

第 10 章 巨幕页头缩略图和警告框组件

学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩略图组件和警告框组件. 一.巨幕组件 巨幕组件主要是展示网站的关键性区域. //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p> 这

巨幕页头缩略图和警告框组件

一.巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角<div class="container"><div class="jumbotron"><h2>网站标题</h2><p>这是一个学习性的网站!</p><p><a href="#" class="btn btn-default">更多内容</a>

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

Bootstrap 组件

下拉菜单,按钮组,搜索框,导航,列表组,分页,标签徽记,缩略图,面板,进度条 1. 下拉菜单 按钮和下拉选择都包裹在<div class=" dropdown"></div>中 按钮必须添加 data-toggle="dropdown" 触发器 放置下拉选项的无序列表需要添加 .dropdown-menu 类 添加一个空洞 <li class="divider"></li> 标签来分割列表项 <

bootstrap学习笔记--bootstrap组件

前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 Bootstrap--表格 Bootstrap--表单 Bootstrap--按钮 Bootstrap--图片 Bootstrap--辅助类 Bootstrap--响应式实用工具 Bootstrap--字体图标 Bootstrap--下拉菜单 Bootstrap--按钮组 Bootstrap--按钮下

Bootstrap——组件

1.字体图标 <span class="glyphicon glyphicon-star" aria-hidden="true"></span> glyphicon:图标的通用类 glyphicon-star:图标类型(样式) aria-hidden="true":通用,避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容 实例: <button type="button" class="

dede5.7栏目页加入缩略图的方法,绝对可用!

在  后台>>系统>>SQL命令行工具 执行SQL: alter table `dede_arctype` add `typeimg` char(100) NOT NULL default ''; 涉及到文件:        dede/catalog_add.php        dede/catalog_edit.php        dede/templets/catalog_add.htm        dede/templets/catalog_edit.htm 打开ded

DISCUZ论坛添加页头及页尾背景图片的几种方法

先给大家分享页头添加背景图片的两种方法: 1. 第一种效果,是给discuz的整体框架添加背景图片,见图示: 添加方法如下:找到你现在使用模板common文件下的header.html文件,在<head></head>部分添加以下代码: <style>body { background-image:url(你的背景图片地址,如http://abc.com/imgs/bg.jpg); background-repeat:no-repeat; background-posi