zoukankan      html  css  js  c++  java
  • 【BootStrap】 基础

    【BootStrap】 基础

     一. 自适应(针对不同设备如手机平板笔电,使页面的宽度适应设备宽度)

      <meta name="viewport" content="width=device-width, initial-scale=1">

     二. 布局

      1. 容器 .container

      2. 栅格 .row - 最主要的布局样式 (注意 row 是百分比宽度,这个用起来不是很方便的)

        a. 一行最多包含12个单元格,超出12个会再起一行

        b. 单元格样式 .col-xs-(手机),.col-sm-(平板),.col-md-(笔电),.col-lg-(大屏桌面)

        c. 为了让一个页面在不同设备上显示良好,可以把手机,平板,笔电等样式都添加上,栅格会自行调整布局

     三. 实用标签

      1. small - 小号文字(可用作副标题)

      2. mark - 高亮

      3. del/s - 文字上加划线

      4. ins/u - 下划线

      5. strong - 加粗

      6. em - 斜体

      7. abbr - 帮助信息

      8. cite - tips

     四. 实用样式

      1. 字体样式

        a. 对齐方式: text-left ,text-center,text-right,text-justify

        b. text-nowrap - 不换行

        c. 大小写 : text-lowercase , text-uppercase , text-capitalize

      2. 列表样式

        a. list-unstyled - 无样式

        b. list-inline - 水平列表

      3. 表格样式

        a. table - 每行带分割线

        b. table-striped - 隔行变色

        c. table-bordered - 带边框

        d. table-hover - 悬浮效果

        e. table-condensed - 使表格变得紧凑

        f. active , success , info , warning , danger- tr 的样式

        g. table-responsive - 将表格置于该容器内,表格将实现自适应

        

  • 相关阅读:
    消息队列中间件的技术选型分析
    数据库和缓存一致性的问题
    《RocketMQ 安装和使用》
    RocketMQ原理讲解系列文章
    阿里巴巴开源项目
    RocketMQ与Kafka对比(18项差异)
    对象初始化
    pytest_05_fixture之conftest.py
    pytest_04_测试用例setup和teardown
    Python与MogoDB交互
  • 原文地址:https://www.cnblogs.com/fzz2727551894/p/4661882.html
Copyright © 2011-2022 走看看