zoukankan      html  css  js  c++  java
  • BootStrap复习总结

    Bootstrap3 复习总结:

    1. 栅格系统:

    sm:768px 

    md:992px

    lg:1200px

    (响应式布局) 

    1.横向分割页面的空间。

    2.在分割的同时考虑到响应式。

    内部实现是12列的栅格系统,为什么是12?

    答:因为12是1,2,3,4,6的最小公倍数,所以12列栅格系统相对较灵活

    .col

    .col-md-2

    .col-sm-3

    ... 

    2.表单

     .container

    .form-group         (内容是margin-bottom:1rem;)

            .has-error 

    .form-inline 

    .form-control        (内容是一些特殊的css样式)

    3.按钮

    .btn btn-default

    btn-primary

    btn-danger

    btn-warning

    btn-info

    btn-lg

    btn-sm

    btn-xs 

    btn-block(占父元素整宽)

    4.按钮组

    .btn-group 给div一个类,里面是一组按钮

    .btn-group-vertical

    5.导航

    ul.nav.nav-tabs 

    li.active

    ul.nav.nav-pills

    .nav-stacked(竖着放)

    .nav-justified(平均分布)

    6.导航栏

    .navbar-header

       .navbar-brand

      

    .nav.navbar-nav

    .nav.navbar-nav.navbar-right

    7.面板

    .panel.panel-default

    .panel-heading

    .panel-body

    .panel-footer

    8.表格

    .table

    .table-striped

    .table-hover(鼠标滑上去有动画)

    .table-borderd

    tr.success

    tr.warning

    tr.danger

    9.其他组件

    分页

    ul.pagination

       li

    ul.pager 

       li.disabled

    面包屑导航

    div.breadcrumb

       li.active

    标签

    span.label.label-success

    span.label.label-info

    span.label.label-warning

    徽章

    span.badge

    警告

    div.alert.alert-danger

    div.alert.alert-success

    列表

    div.list-group

        a.list-group-item

  • 相关阅读:
    DiskCatalogMaker for Mac常见问题解答
    macOS应用程序如果在打开时提示崩溃,该怎么解决
    使用Marmoset Hexels for Mac如何创建一个图库
    Redis Desktop Manager for Mac怎样在连接树中搜索
    java学习笔记IO之File类
    java学习笔记之集合家族2
    mongoDB之数据类型
    mongoDB之集合操作
    mongoDB之数据库操作
    Bootstrap 网格系统
  • 原文地址:https://www.cnblogs.com/eret9616/p/9020954.html
Copyright © 2011-2022 走看看