zoukankan      html  css  js  c++  java
  • Bootstrap CSS 学习笔记

    一. 概览

      1.Bootstrap是用了一些HTML5和CSS属性,为让其正常显示,需要使用HTML5文档类型(doctype),否则会有浏览器显示不一致或特定情况下不能通过W3C标准的验证。

      2.为增加Bootstrap开发的网站对移动设备的友好性,需在head中添加 viewport meta标签。width属性控制设备的宽度,设为device-width可以确保在不同的分辨率的设备浏览

      时都能正确呈现;

      initial-scale=1.0确保网页加载时以1:1的比例呈现,不会有任何缩放;

      移动设备浏览器上,通过为viewport meta添加user-scalable=no 可以禁止其缩放功能;

      maximum-scale=1.0和user-scalable=no一起使用,禁止缩放的同时,用户只能滚动屏幕,让你的屏幕看上去更像原生应用的感觉。

      3.为图片添加img-responsive class可使图像对响应式布局的支持更友好。height:auto相关元素的高度取决于浏览器,max-width:100%会重写任何通过width属性指定的宽度,

      这两个属性可使图片按比例缩放,不超过其父元素的尺寸。

      4.容器container class用于包裹页面上的所有内容

      5.如果想要向任何标题添加一个内联子标题,只需要简单的在元素两旁添加<small>,或者添加 .small class ,这样就可以得到一个字号更小,颜色更浅的文本。

        HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

      6.为了给段落添加强调文本,可以添加class = "lead",这样将得到更大更粗、行高更高的文本。如:

        <p class="lead">```</p>

      7.Bootstrap 代码允许有两种显示方式:

        <code>标签:需要内联显示代码的时候

        <pre> 标签:代码需要被显示成一个独立的块或者说有多行的时候。

        当使用<code>标签和<pre>标签的时候,开始和结束标签使用了Unicode变体:&lt;和&gt; 。

      8.http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm 这个链接是字形图标定制,很好用啊。

  • 相关阅读:
    JUC高并发编程(三)之模拟接口压力测试
    JUC高并发编程(二)之多线程下载支付宝对账文件
    JUC高并发编程(一)之请求合并案例
    《Head First设计模式》读书笔记
    图文详解23种设计模式
    Laravel路由匹配
    深夜debug:一个不常遇到的HbuilderX自动化测试运行问题
    高德地图API中折线polyline不能跨越180度经度线的解决方案
    sublime配置java运行环境
    Docker技术入门
  • 原文地址:https://www.cnblogs.com/zrc-study/p/7405398.html
Copyright © 2011-2022 走看看