关于作者:
- 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
- 艺名:天放
- weibo:@tianFang
- blog: zhengyunfei.iteye.com
- email: zhengyunfei8@gmail.com
本文主要来讲解以下内容:1.大屏幕介绍;2.页面标题;3.缩略图;4.警示框;5.Well;6.总结。
大屏幕介绍
轻量,灵活的可选组件,扩展整个视角,展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度,请别把它包括在.container。
如果需要让大屏幕介绍(jumbotron)占据全部宽度并且去掉圆角,只需将其放到所有.container外面,并在其内部添加一个.container。
这两种效果差不多,但是还有是有区别的。
页面标题
简单的h1样式,可以适当地分出空间且分开页面中的章节。像其它组件一样,它可以使用h1的默认small元素(添加了一些额外的样式)。
缩略图
用缩略图组件扩展Bootstrap的栅格系统,可以简单地显示栅格样式的图像,视频,文本,等等。
默认案例
Boostrap的缩略图的默认设计仅需最小的标记,就能展示带链接的图片。
当页面放缩到一定程度会变成
定制内容
用一点点额外的标记,可以把任何种类的HTML内容像标题,段落或按钮加入缩略图。
警示框
为典型的用户动作提供少数可用且灵活的反馈消息。
案例
为了得到基本的警告信息,把任何文本和可选的关闭按钮放入.alert和四种有意义的类中(例如,.alert-success)。
没有默认类
警告框没有默认类,只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功,消息,警告或危险中任选其一。
可关闭的警告框
可以用一个可选的.alert-dismissable和关闭按钮。
确定在所有设备上的正确行为
一定要给data-dismiss="alert"属性用上。
警告框中的链接
用.alert-link工具类,可以快速提供在任何警告框中相符的颜色。
Well
默认效果
把Well用在元素上,能有嵌入(inset)的的简单效果。
可选类
用这两种可选修饰类,可以控制内补(padding)和圆角。
总结
通过本文的学习,继续对Bootstrap Component其他组件的深入了解。
相关推荐
缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题、描述内容、按钮等信息。 bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现。下面...
Bootstrap 创建缩略图的步骤如下: 1、在图像周围添加带有 class .thumbnail 的 <a> 标签. 2、这会添加四个像素的内边距(padding)和一个灰色的边框。 有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容...
缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统...
3.7 缩略图 3.8 媒体对象 本章总结 本章作业 第4章 Bootstrap插件 l 动画过渡 2 Bootstrap中的JS插件 2.1 模态框 操作案例1:利用模态窗体制作百度登录框 2.2 轮播图 操作案例2:利用.Bootstrap制作携程网首页的轮播...
Bootstrap 页面标题(Page Header) 161 Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告(Alerts) 167 可取消的警告(Dismissal Alerts) 168 警告(Alerts)中的链接 170 Bootstrap 进度条 172 默认的...
彻底禁止WordPress缩略图,节省空间承载; 增加编辑器插入短代码功能,用户体验提供升; 增加公众号吸粉功能,关注访问隐藏内容; 增加文章密码保护功能,用户体验提供升; 增加展开/收缩功能,用户体验提供升; 增加回复...
视频缩略图生成,Facebook 评论系统,内页文章相册幻灯片,标题新闻,自定义颜色分类,自定义背景,SEO,主题选项面板。安装说明:wp后台直接上传安装即可。wordpress:Magazine 杂志新闻主题 v1.3 bulid2014.10.17 ...
再然后,就是 关于about.html页面:博主简介利用jquery焦点缩略图轮播滚动类似选项卡滑动切换。可以自动展现不同的图片。其次,是成长页面about.html:是博主对未来的美好未来的期待,利用bootstrap响应式布局进行...
AL_lolimeow for Typecho 基于Wordpress 主题 lolimeow 开发的Typecho AL_lolimeow主题 作者: ...支持文章图片缩略图,自动获取文章第一张图片为缩略图,如果没用则随机返回一个图片 使用animate+wowjs
Magazine wordpress主题,一个杂志WordPress主题,主题特点:自适应和视网膜支持...视频缩略图生成,Facebook 评论系统,内页文章相册幻灯片,标题新闻,自定义颜色分类,自定义背景,SEO,主题选项面板。 安装说明:w
未设置特色图片自动获取文章首张图片作为缩略图(外链图片自动将首张图片保存到本地并设置为特色图片); 边栏滚动到底部后固定位置功能; 微信分享显示描述、缩略图功能; 支持WooCommerce插件,可实现商城功能; ...
Emlog响应式的模板-Jane简介 ...10、文章缩略图 11、导航折叠搜索 12、自适应下拉导航 ...........更多请自行体验! Emlog响应式的模板-Jane页面截图展示 相关阅读 同类推荐:站长常用源码
打开Reddit链接后,可通过单击缩略图/标题或使用键盘(支持RES键盘导航)来显示带有常用信息(分数,标题,subreddit,评论)和操作(登录,赞成,反对,保存,主持人垃圾邮件/删除/批准,关闭或最小化)。...
项目介绍 一个搜罗了部分动漫信息的网站 首页 首页轮播图和部分动漫 logo旁边为网易云音乐的外链播放器 点击动漫图片或标题进入动漫详情页 点击 找找看 可跳转到...罗列出用户添加的动漫,包含动漫缩略图,动漫名,热
sys_bm 中山大学生物博物馆讲座预约网站 0. 制作手记 代码编写要考虑响应式设计以及客户端兼容性; 2. 使用Bootstrap 2.x 框架; 1. 项目日程 ...讲座介绍-详细介绍页:“缩略图”、“标题”、“主讲人
打开Reddit链接后,可通过单击缩略图/标题或使用键盘(支持RES键盘导航)来显示带有常用信息(分数,标题,subreddit,评论)和操作(登录,赞成,反对,保存,主持人垃圾邮件/删除/批准,关闭或最小化)。...
工作经历 2019-12-12 主页操作 2019-12-13 使用子页面 2019-12-16 安装MD引导程序并为其设置...修改缩略图输出 2019-12-23 关于页面响应进行中 董事会逻辑修改和新闻板分页正在进行中 2019-12-24 董事会分页实施完