下拉菜单

  • .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. Java课程设计—象棋

    1. 团队名称.团队成员介绍 团队名称:WY 团队成员: 吴慧婷[组长] 201521123094 网络1514 姚佳希 201521123042 网络1512 2 项目git地址 Java课程设计 ...

  2. Java： 类继承中 super关键字

    super 关键字的作用有两个: 1)在子类中调用超类的构造器,完成实例域参数的初始化,调用构造器的语句只能作为另一个构造器(通常指的是子类构造器)的第一条语句出现, 2)在子类中调用超类的方法,如: ...

  3. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'zhongfucheng.user' does

    编写第一个Hibernate程序的时候,就发现出现了错误 Exception in thread "main" org.hibernate.exception.SQLGrammar ...

  4. 《Java从入门到放弃》JavaSE入门篇：练习——单身狗租赁系统

    今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...

  5. 利用ADO让普通人用excel读取oracle数据库表的通用办法

    Ref:http://blog.csdn.net/iamlaosong/article/details/8465177 Excel通过ADO方式连接到Oracle并操作Oracle给那些编程能力不强的 ...

  6. WEB前端面试真题 - 2000！大数的阶乘如何计算？

    HTML5学堂-码匠:求某个数字的阶乘,很难吗?看上去这道题异常简单,却不曾想里面暗藏杀机,让不少前端面试的英雄好汉折戟沉沙. 面试真题题目 如何求"大数"的阶乘(如1000的阶乘 ...

  7. 【Debian 8.8】Java 8 安装以及环境变量配置

    事实上可以分为简单的三个步骤: 下载 JDK 压缩包 解压压缩包 配置环境变量 需要注意的是: 所有命令默认在 root 权限下进行! 演示环境是 Debian 8.8 64位 (阿里云学生机) 1. ...

  8. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  9. Split分割字符串

    第一种方法:打开vs.net新建一个控制台项目.然后在Main()方法下输入下面的程序. string s="abcdeabcdeabcde"; string[] sArray=s ...

  10. Ngnix技术研究系列1-通过应用场景看Nginx的反向代理

    随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...