下拉菜单

  • .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. 201521123080《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  2. 201521123023《java程序设计》第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  3. JAVA课程设计-计算器（201521123028 李家俊）

    1.团队课程设计博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模板或任务说明 主要负责计算器图形界面 包括操作按钮,菜单项以及输出 ...

  4. SQL数据库基础知识-巩固篇<一>

    SQL数据库基础知识-巩固篇<一>... =============== 首先展示两款我个人很喜欢的数据库-专用于平时个人SQL技术的练习<特点:体积小,好安装和好卸载,功能完全够用 ...

  5. grep与正则表达式基础

    目录 grep 正则表达式 grep用法简介 我们介绍GREP的用法,主要用于匹配行,我们借助下面的正则表达式来介绍如何使用grep,还有就是正则表达式在linux中是极为重要的一部分. 命令:gre ...

  6. Struts2第十一篇【简单UI标签、数据回显】

    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...

  7. 异常 SQLErrorCodes loaded: [DB2, Derby, H2, HSQL, Informix, MS-SQL, MySQL, Oracle, PostgreSQL, Sybase]

    使用Spring 的JDBCtemplate 调用数据库的时候 出现了如下的问题 SQLErrorCodes loaded: [DB2, Derby, H2, HSQL, Informix, MS-S ...

  8. java 面向对象 1

    目录 一.面向过程的思想和面向对象的思想 二.简单理解面向对象 三.面向对象的设计思想 四.对象和类的概念 五.如何抽象出一个类? 六.类(对象)之间的关系 七.Java与面向对象 八.为什么使用面向 ...

  9. js中set和get的用法

    get 语句作为函数绑定在对象的属性上,当访问该属性时调用该函数. set 语法可以将一个函数绑定在当前对象的指定属性上,当那个属性被赋值时,你所绑定的函数就会被调用. eg: var log = [ ...

  10. JSON依赖的选择

    json-lib 源码:https://github.com/aalmiray/Json-lib/ 最新版本:2.4 不再更新 <dependency> <groupId>ne ...