zoukankan      html  css  js  c++  java
  • bootstrap 笔记01

    bootstrap源码样式:


    移除body的margin声明
    设置body的背景色为白色
    为排版设置了基本的字体、字号和行高
    设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式


    1,<small> bootstrap.css文件中第407行~第443行
    2, 段落(正文文本) bootstrap.css文件中第274行~280行*/
    3,强调内容lead bootstrap.css文件第470行~480行*/
    除此之外,Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
    /*源码查看bootstrap.css文件第55行~第58行*/

    b,strong {
    font-weight: bold; /*文本加粗*/
    }

    /*源码查看bootstrap.css文件第481行~第484行*/

    small,.small {
    font-size: 85%; /*标准字体的85%,也就是14px * 0.85px,差不多12px*/
    }

    /*源码查看bootstrap.css第485行~第487行*/

    cite {
    font-style: normal;
    }

    4,粗体:strong 或b 标签时加粗
    5,斜体:em 和 i标签,font-style:italic
    6,强调相关的类 bootstrap.css文件第500行~第532行:

    .text-muted:提示,使用浅灰色(#999)
    .text-primary:主要,使用蓝色(#428bca)
    .text-success:成功,使用浅绿色(#3c763d)
    .text-info:通知信息,使用浅蓝色(#31708f)
    .text-warning:警告,使用黄色(#8a6d3b)
    .text-danger:危险,使用褐色(#a94442)

    7,文本对齐风格 bootstrap.css文件第488行~第499行:
    ☑ .text-left:左对齐
    ☑ .text-center:居中对齐
    ☑ .text-right:右对齐
    ☑ .text-justify:两端对齐 (在使用中文中,谨慎使用)

    8,列表
    ☑ 普通列表
    ☑ 有序列表
    ☑ 去点列表
    ☑ 内联列表
    ☑ 描述列表
    ☑ 水平描述列表

    9,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

    10,列表-内联列表 添加类名 list-inline,为制作水平导航而生
    bootstrap.css文件第584行~第593行*/

    11,列表-定义列表
    ,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
    /*源码请查看bootstrap.css文件第594行~第607行*/

    12,列表-水平定义列表
    添加类 dl-horizontal /*源码请查看bootstrap.css文件第608行~第621行*/

    13,代码(很酷)
    1、使用<code></code>来显示单行内联代码
    2、使用<pre></pre>来显示多行块代码
    3、使用<kbd></kbd>来显示用户输入代码

    14,pre 元素,当代码块超过 340高的时候,就会出现垂直滚动条,添加类: pre-scrollable
    bootstrap.css第731行~第734行*/

    15,表格
    ☑ .table:基础表格 第1402行~第1441行
    ☑ .table-striped:斑马线表格 第1465行~第1468行:
    ☑ .table-bordered:带边框的表格 第1450行~第1464行
    ☑ .table-hover:鼠标悬停高亮的表格
    ☑ .table-condensed:紧凑型表格
    ☑ .table-responsive:响应式表格,可以用在外面的div上

    16,表格-表格行的类
    .active 表示当前活动的信息
    .success 表示成功或正确的行为
    .info 表示中立的信息或行为
    .warning 表示警告
    .danger 表示危险或错误的行为

    17,基础表单 /*源码请查阅bootstrap.css文件第1631行~第1652行*/

  • 相关阅读:
    postman: 字符串与数字的转换
    postman:截取字符串字符
    postman:获取txt变量中数据
    postman:参数化外部文件txt、csv、json
    postman:全局变量、环境变量、collection模块变量
    windows下更新python报错permission denied
    vertica 7.0 使用kafka
    Kafka报错-as it has seen zxid 0x83808 our last zxid is 0x0 client must try another server
    vertica 8.0 新特性
    mysql source导入报错ERROR 1366的解决方法
  • 原文地址:https://www.cnblogs.com/geek12/p/4658990.html
Copyright © 2011-2022 走看看