下拉菜单

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

    1. 本周学习总结 java至今已经不仅是个程序语言,也代表了解决问题的平台,更代表原厂,各个厂商,社群,开发者与用户沟通的成果.若以程序语言来看待java,正如冰山一角,如此便看不到java身为程序 ...

  2. 201521123017 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步 ...

  3. 201521123103 《java学习笔记》 第十二周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 二.书面作业 将Student对象(属性:int id, String name,int age,double ...

  4. 201521123112《Java程序设计》第13周学习总结

    1. 本周学习总结 协议的概念是网络中为了通信而建立的规则,常用的应用层协议有http,ftp等. 测试计算机之间的网络是否连通可以使用ping命令. 可以使用IP+端口号的方法来确定数据包是发给哪个 ...

  5. video标签

    Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...

  6. eclipse版本选择

    Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代IDE开发环境,2001年11月贡献给开源社区,现在它由非营利软件供应商联盟Eclipse基金会. Ec ...

  7. Android之View绘制流程开胃菜---setContentView(...)详细分析

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 1 为什么要分析setContentView方法 作为安卓开发者相信大部分都有意或者无意看过如下图示:PhoneWindow,DecorView这些 ...

  8. Spring+SpringMVC+MyBatis整合进阶篇（四）RESTful实战(前端代码修改)

    前言 前文<RESTful API实战笔记(接口设计及Java后端实现)>中介绍了RESTful中后端开发的实现,主要是接口地址修改和返回数据的格式及规范的修改,本文则简单介绍一下,RES ...

  9. 腾讯x5Webview取代原生android Webview

    一.官方地址: https://x5.tencent.com/tbs/ 二.不需要申请开发者,QQ直接登录,下载即可集成到项目中. 三.与原生的webview对比优势 1) 速度快:相比系统webvi ...

  10. MySQL Base

    /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 ---> input pwd /* 数据库存贮引擎 */    InnoDB :        1) ...