美文网首页
bootstrap(6)

bootstrap(6)

作者: OldSix1987 | 来源:发表于2016-08-27 00:51 被阅读17次

1输入框组

  • 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>的父元素。
Paste_Image.png Paste_Image.png

2标签页组

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

3路径导航

  • breadcrumb 赋给ol、ul可以实现面包屑效果
  • active 赋给当前栏目,当前栏目不加链接
Paste_Image.png Paste_Image.png

4缩略图

  • thumbnail:赋给a元素,可以实现缩略图样式
  • caption:可以实现缩略图标题及描述
Paste_Image.png Paste_Image.png

5分页

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

Paste_Image.png Paste_Image.png

6导航栏

  • navbar:导航栏的基类,用于<nav>元素
  • navbar-default:导航栏默认样式,用于<nav>元素
  • container:是<nav>的子元素,导航栏内容都放入其中
  • navbar-header:导航栏头部样式
  • navbar-brand:设置品牌图标样式
  • collapse:是折叠导航栏的样式的基类
  • nav-collapse:是折叠导航栏样式
  • nav:是导航栏的链接基类
  • navbar-nav:是导航栏的链接样式
  • navbar-form:导航栏表单,可以使表单元素排在同一行
  • 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>元素
Paste_Image.png Paste_Image.png

相关文章

  • bootstrap(6)

    1输入框组 input-group:只能用于文本框 ,不能用于 和 。 input-group-addon:用于在...

  • bootstrap--概述

    bootstrap4对iphone6及以下不支持,如果要支持,可以下载bootstrap3,下载完bootrap后...

  • Bootstrap 基础

    标题(一) Bootstrap和普通的HTML页面一样,定义标题都是使用标签h1到h6,只不过Bootstrap覆...

  • 浏览器兼容

    框架选择 Bootstrap (>=ie8) jQuery 1.~ (>=ie6), jQuery 2.~ (>=...

  • 6. Bootstrap框架

    请简述Bootstrap的主要特色和缺点。 主要特色 移动设备优先 浏览器支持 容易上手 支持式响应式设计 开源代...

  • angular 使用 Bootstrap

    Include Bootstrap 包括 Bootstrap Bootstrap is a popular CSS...

  • 20180103

    1 Bootstrap高级webstorm,sublime里面快速生成标签:输入 span.h${标题$}*6...

  • Centos 安装Supervisor

    centos 6 将Python2.6更新到2.7 安装pip curl https://bootstrap.py...

  • 首次使用 Bootstrap 的心得

    Bootstrap 的初始化作用 初始化Bootstrap,即:bootstrap = Bootstrap(app...

  • [Guice] 2 面向对象化

    1 bootstrap的概念这里的bootstrap不是前端框架BootStrap,那什么是bootstrap呢?...

网友评论

      本文标题:bootstrap(6)

      本文链接:https://www.haomeiwen.com/subject/snwzsttx.html