下拉菜单

  • .dropdown:将下拉菜单触发器和下拉菜单包含在其中
  • .dropdown-menu:给<ul>制定下拉菜单的样式
  • .dropup:向上弹出菜单
  • .dropdown-menu-left  .dropdown-menu-right：菜单对齐方式
  • Data-toggle属性：下拉菜单触发器，取值“dropdown”
  • .divider：为下拉菜单添加分割线，用于将多个链接分组(增加一个空li，并加类)
  • .disabled:禁用的菜单选项。

    • <div class="container dropdown" style="margin-bottom: 50px"> // 父元素用.dropdown的类

      <button  type="button" class="btn btn-warning" data-toggle="dropdown">字体

    • <span class="caret"></span></button>  //给按钮添加触发器，取值“dropdown”,字体后面添加三角符号

    • <ul class="dropdown-menu"> // 使触发器和Ul相关联，并给它制定样式。

      <li><a href="#">宋体</a></li>

      <li><a href="#">黑体</a></li>

      <li><a href="#">楷体</a></li>

      </ul>

      </div>

        • 按钮组

          • .btn-group：给父元素用的。将按钮包住。不加按钮 为分开，加了为合并。
          • .btn-toolbar：将多个按钮组包住，再建个大DIV 加类样式。
          • 按钮尺寸：.btn-group-lg  (sm  xs);
          • .btn-group-vertical:垂直排列的按钮组。

　

　　　　　　　　　　

输入框组

  • .input-group:只能用于文本框<input>,不能用于<select><textarea>
  • .input-group-addon:在input标记前后添加，用在<span标记内>
  • Input-group把input和input-group-addon包围
  • .input-group-lg和.input-group-sm控制输入框组的尺寸

标签页（选项卡）

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

注意 .nav-tabs 类依赖 .nav 基类。

路径导航

  • .breadcrumb ：赋给<ol>或者<ul>加的类
  • .active 给当前栏目，不加链接

缩略图

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

  • 分页

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

导航栏

用于nav标记的类

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

    1. 思路:

      1，给nav加类样式（基类，导航栏默认样式，顶端固定）用（1，2，14，19）

      <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

      2，导航栏内容放入DIV中，所用类样式：container  用（3）

      <div class="container">

      3，写导航栏的头部样式并加入品牌LOGO。用（4，5）

      <div class="navbar-header">

      <a class="navbar-brand" href="#">Book</a>

      <p class="navbar-text">欢迎光临!</p>

      </div>

      4，加导航条链接，用折叠导航样式基及基类（）

      <div class="collapse navbar-collapse">  //（6，7）

      <ul class="nav navbar-nav navbar-left">//（8，9）

      <li class="active"><a href="#">看电影</a></li>

      <li><a href="#">看小说</a></li>

      <li><a href="#">看图片</a></li>

      <li><a href="#">听音乐</a></li>

      <li><a href="#">玩游戏</a></li>

      </ul>

      5，引入搜索框，给form加类样式排成一列 并对齐（10，11）

      加入表单组样式

      <form class="navbar-form navbar-left">

      <div class="form-group">

      <input type="text" placeholder="Search" class="form-conrol">

      </div>

      <button type="button" class="btn btn-danger"> Search</button>

      </form>

CSS组件的更多相关文章

  1. CSS组件架构的设计思想

    不管是设计思想,还是架构,都可以总结为一个词:AO模式.A表示Append,即“附加”的意思,O表示Overwrite,即“重写”的意思.所有的CSS组件都是沿用这种思想来设计的.这也是CSS的特性, ...

  2. [Bootstrap]7天深入Bootstrap(4)CSS组件

    Bootstrap框架的三大核心之二:组件. 组件也是最核心的地方,因为绝大部分的网页都必须利用组件才能构建出绚丽的页面. 组件包括:Icon图标(Glyphicon). 下拉菜单(Dropdown) ...

  3. bootstrap学习总结-css组件(三)

    今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...

  4. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  5. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  6. 《深入理解bootstrap》读书笔记：第4章 CSS组件（下）

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  7. 《深入理解bootstrap》读书笔记：第4章 CSS组件（上）

    bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...

  8. CSS组件化思考

    为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...

  9. css组件规范

    7月份研究了下 写了下总结. 笔记地址

随机推荐

  1. 201521123065《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 1.publ ...

  2. 201521123112《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点 1.2 可选:使用常规方法总结其他上课内容 课上讲了一些Markdown的用法,包括分割线.参考链接.代码引入等等. 2. 书面 ...

  3. 201521123045 《Java程序设计》第2周学习总结

    ---恢复内容开始--- #1. 本周学习总结 上课讲解了上次的实验题目,对其中题目的一些问题得到了解决.学会了java数组的使用,对如何使用码云上传代码有了更清晰的理解.pta还是有一些问题没有解决 ...

  4. java :equals()和hashcode()方法的结合使用

    哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...

  5. 笔记3 linux 多线程 条件变量+互斥锁

    //cond lock #include<stdio.h> #include<unistd.h> #include<pthread.h> struct test { ...

  6. java.lang.IllegalArgumentException: object is not an instance of declaring class

    今天在使用反射的时候,出现了java.lang.IllegalArgumentException: object is not an instance of declaring class错误-具体是 ...

  7. 克隆虚拟机 virtualbox 修改 uuid

    cmd E:\Program Files\Oracle\VirtualBox>VBoxManage.exe internalcommands sethduuid "E:\Program ...

  8. Bootstrap框架的了解和使用之栅格系统

       前    言 Bootstrap Bootstrap 包含了一个响应式的.移动设备优先的.不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列.它包含了用于简单的布局选项的预定 ...

  9. thinkphp5.0无限极分类及格式化输出

    首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...

  10. 西邮linux兴趣小组2014纳新免试题（五）

    [第五关] 题目 http://final5.sinaapp.com/ 关注西邮Linux微信平台,得到一个名为a的文件 分析 分析文件a 需要反汇编,拿IDA上,打开后发现key_function及 ...