Bootstrap 巨幕页头缩略图和警告框组件
一.巨幕组件
//在固定的范围内,有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
效果图:
//100%全屏,没有圆角
<div class=" jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
效果图:
二.页头组件
//增加一些空间
<div class="page-header"> <h1>大标题 <small>小标题</small></h1> </div>
三.缩略图组件
//缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt=""> </div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt=""> </div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt=""> </div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt=""> </div>
</div>
</div>
</div>
效果图:
//自定义内容
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail"> <img src="yhmgc/img/4.jpg" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>这是一个图片结合文字的缩略图</p>
<p><a href="#" class="btn btn-default">进入</a></p>
</div>
</div>
</div>
</div>
</div>
效果图:
四.警告框组件
警告框组件是一组预定义消息。
//基本警告框
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>
//带关闭的警告框
<div class="alert alert-success"> Bootstrap
<button type="button" class="close" data-dismiss="alert"> <span>×</span> </button>
</div>
//自动适配的超链接
<div class="alert alert-success"> Bootstrap,请到官网 <a href="#" class="alert-link">下载</a> </div>
Bootstrap 巨幕页头缩略图和警告框组件的更多相关文章
- 第二百四十节,Bootstrap巨幕页头缩略图和警告框组件
Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...
- Bootstrap(9) 巨幕页头缩略图和警告框组件
一.巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角 <div class="container"> <div class="ju ...
- bootstrap-巨幕、缩略图、警告框
巨幕: <div class="jumbotron"> <div class="container"> <h1>W3Scho ...
- Bootstrap 学习笔记4 巨幕页头略缩图警告框
- Bootstrap 标签徽章巨幕页头
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- Bootstrap入门(二十)组件14:警告框
Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- Bootstrap学习之路(2)---导航组件
在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> ...
- Bootstrap入门(十九)组件13:页头与缩略图
Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...
随机推荐
- Session: 防止用户多次登陆
在web开发时,有的系统要求同一个用户在同一时间只能登录一次,也就是如果一个用户已经登录了,在退出之前如果再次登录的话需要报错. 常见的处理方法是,在用户登录时,判断此用户是否已经在Applicati ...
- C#的GC机制(来自网摘复制,未整理)
第一个就是很多人用.Net写程序,会谈到托管这个概念.那么.Net所指的资源托管到底是什么意思,是相对于所有资源,还是只限于某一方面资源?很多人对此不是很了解,其实.Net所指的托管只是针对内存这一个 ...
- Lock的基础概念
锁的相关概念 1.可重入锁 如果锁具备可重入性,则称作为可重入锁.像synchronized和ReentrantLock都是可重入锁,可重入性在我看来实际上表明了锁的分配机制:基于线程的分配,而不是基 ...
- js:语言精髓笔记9--函数式语言特征
形式化运算系统的研究: 图灵:提出图灵机形式系统,通过0,1运算系统来解决复杂问题: 冯诺依曼:提出了冯诺依曼体系:即通过修改内存反映运算结果: 阿隆左.丘奇:提出新的运算范型Lambda演算,计算机 ...
- 1143 多少个Fibonacci数
时间限制:500MS 内存限制:65536K提交次数:270 通过次数:16 题型: 编程题 语言: C++;C Description 给你如下Fibonacci 数的定义: F1 = 1 F ...
- 在python包管理中使用easy_install软件的步骤
本文主要介绍的是让python包管理变得更加容易的实际应用方法,就是运用easy_install这一软件,下面是文章的具体介绍. easy_install让python包管理变得 如果你想对Pytho ...
- BZOJ2690 : 字符串游戏
离线算法: 先将所有涉及到的串建成字典树,然后用线段树维护dfs序,时间复杂度$O(m\log L)$. 在线算法: 用替罪羊树动态维护Trie树的dfs序即可,时间复杂度$O(L\log L)$. ...
- web farm 讨论引出
关于web farm 有成功的实施的文档没 用它还不如 用nginx,简单易用. Nginx for windows的运行效果咋样 windows iis无敌 玩nginx就不要用win系统,必须l ...
- 【BZOJ】3223: Tyvj 1729 文艺平衡树(splay)
http://www.lydsy.com/JudgeOnline/problem.php?id=3223 默默的.. #include <cstdio> #include <cstr ...
- mysql中datetime与timestamp的比较
相同 显示 TIMESTAMP列的显示格式与DATETIME列相同.换句话说,显示宽度固定在19字符,并且格式为YYYY-MM-DD HH:MM:SS. 不同 范围 datetime 以'YYYY-M ...