Bootstrap第3天

图片样式

  • .img-responsive：直接为图片添加该样式，可以实现响应式图片。
  • .center-block：图片居中样式，而不能使用text-center样式。
  • 图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

    说明： bootstrap 中标签中的 role 、aria-* 属性不用理会，直接忽略，他是专门针对读屏设配定制的，也就是为盲人设计的！

辅助类样式

  • 文本颜色类：.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger
  • 背景颜色类：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger
  • 三角符号：<span class = "caret"></span>
  • 快速浮动类：.pull-left(左浮动)、.pull-right(右浮动)
  • 清除浮动：为父元素添加 .clearfix 可以清除浮动。
  • 让内容块网页居中：<div class = "center-block"></div>

 

CSS组件——下拉菜单

  • .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。
  • data-toggle属性：下拉菜单触发器。取值为"dropdown"。
  • .dropdown-menu：给<ul>指定下拉菜单的样式。
  • .dropup：向上弹出的下拉菜单(下拉菜单父元素)。
  • 下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right
  • .divider：为下拉菜单添加分隔线，用于将多个链接分组。
  • .disabled：禁用的菜单项。

 

CSS组件——按钮组

  • .btn-group：按钮组(可以实现将一组按钮放在同一行)。
  • .btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。
  • 按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs
  • .btn-group-vertical：垂直排列的按钮组。

 

CSS组件——按钮式下拉菜单

  • 单按钮下拉菜单
  • 分裂式按钮下拉菜单

 

CSS组件——输入框组

  • .input-group：只能用于文本框<input>，不能用于<select>和<textarea>。
  • .input-group-addon用于在<input>前后添加额外元素，赋给一个<span>元素即可。
  • 注意：将.input-group-addon和<input>元素包在.input-group之中。
  • .input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。
  • .input-group-btn可以作为额外元素的按钮，应该是作为<button>的父元素。

 

CSS组件——标签页(选项卡)

  • .nav是标签页的基类
  • .nav-tabs是标签页类样式
  • .active是标签页的状态类(当前样式)
  • .nav-pills胶囊式标签页
  • .nav-stacked胶囊式标签页堆放排列(垂直排列)

 

CSS组件——导航条

  • .navbar：导航栏的基类，用于<nav>元素。
  • .navbar-default：导航栏默认样式，用于<nav>元素。
  • .container是<nav>的子元素。导航栏内容都放入其中。
  • .navbar-header：导航栏头部样式。
  • .navbar-brand：设置品牌图标样式
  • .collapse是折叠导航栏的样式的基类。
  • .navbar-collapse是折叠导航栏样式。
  • .nav是导航栏的链接基类。
  • .navbar-nav是导航栏的链接样式。
  • .navbar-from：导航栏表单，可以使表单元素排在同一行。
  • .navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。
  • .navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐。
  • .navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。
  • .navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px
  • .navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px;
  • .navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失。
  • .navbar-inverse：可以实现反色导航栏，用于<nav>元素。

CSS组件——路径导航

  • .breadcrumb：赋给<ol>可以实现面包屑效果。
  • .active赋给当前栏目，当前栏目不加链接。

CSS组件——缩略图

  • .thumbnail赋给<a>元素，可以实现缩略图样式。
  • .caption 可以实现缩略图标题及描述

CSS组件——分页

  • .pagination赋给<ul>元素可以实现分页效果
  • &laquo; 上一页
  • &raquo; 下一页
  • .disabled禁用状态
  • .active激活状态
  • .pagination-lg分页大尺寸
  • .pagination-sm分页小尺寸
  • .pager可以实现翻页效果。上一页、下一页效果。

 

 

 

Bootstrap第3天的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. 页面加载后累加，自加1&&判断数字是否为两位数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. PS 如何制作Vista的毛玻璃效果

    1 对一个图像的任意一部分新建一个选区   2 对选中区域进行高斯模糊,大小为5像素   3 再次新建一个图层,填充为深蓝色(#E9E7E3),填充为10%-15%.高斯模糊0.5像素.   4 再对 ...

  3. C5:单例模式 Singleton

    保证一个类仅有一个实例,并提供一个访问它的全局访问点. 应用场景:A.一个无状态的类使用单例,可以节省内存B.全局或配置类(其实这个也是无状态的)C.脚本或程序从运行开始到结束,仅需要一个实例来保证数 ...

  4. 02-1设置第一启动项--电脑怎么进入BIOS的方法集合

    电脑怎么进入BIOS的方法集合 很多时候为了对电脑进行相关设置,我们必须进入电脑的bios界面,但是不同的电脑进入bios的方法各不相同,小编今天就在这儿将各种电脑进入bios的方法汇总一下,希望对你 ...

  5. shader之旅-7-平面阴影（planar shadow）

    根据<real-time shadow>这本书第二章中的推导,实现了最简单的阴影技术. planar shadow通过一个投影矩阵将被灯光照射的物体的顶点沿着光线方向投影到接受阴影的平面. ...

  6. curl命令测试https

    curl -vosa --resolve pic.test.net::222.241.7.179 https://pic.test.net/UploadFiles/201312031744347965 ...

  7. CentOs上搭建nginx

    目录 CentOs上搭建nginx 1. 在root环境下安装nginx 1.1 常用工具安装 1.2 关闭iptables规则 1.3 关闭SELinux 1.4 安装C/C++环境和PCRE库 1 ...

  8. [Erlang危机](5.1.1)内存

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface , and some of the hidden data I mention ...

  9. IntelliJ IDEA（2017）下载并破解

    idea激活,JetBrain旗下软件激活 我在修改这个博主的文章再添加了code码 http://blog.csdn.net/qq_24504453/article/details/77407329 ...

  10. 堆排序算法的java实现

         堆积排序(Heapsort)是指利用堆积树(堆)这种数据结构所设计的一种排序算法,可以利用数组的特点快速定位指定索引的元素.堆排序是不稳定的排序方法,辅助空间为O(1), 最坏时间复杂度为O ...