zoukankan      html  css  js  c++  java
  • BootStrap基础知识

    BootStrap是一个用于快速开发Web应用程序和网站的前端框架。

    基于Html、CSS、JavaScript的。

    所有主流的浏览器都支持BootStrap。

    包含内容:BootStrap提供了一个带有网格系统、链接样式、背景的基本结构。

    CSS:全局的css设置、定义基本的htlml元素样式、可扩展的class。

    组件:包含了十几个可重用的组件。

    JavaScript插件:BootStrap包含了十几个自定义的jquery插件。

    BootStrap的组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

    在BootStrap创建的网页开头使用html5的文档类型DOCTYPE。

    移动设备优先是BootStrap的最显著的变化。

    确保适当的绘制和触屏缩放,在HTML的head中添加viewport meta标签。

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

    width设置为device-width可以确保它能正确呈现在不同设备上。

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

    user-scalable=no可以禁用其缩放(zooming)功能。

    maximum-scale=1.0与user-scale=no一起使用,禁用了缩放功能后,用户只能滚动屏幕。

    响应式图像:<img src="" class="img-responsive" alt="响应式图像">。

    响应式图像对响应式布局的支持更加友好

    .img-responsive{

                display:block;

                height:auto;

                 max-100%;

    }

    把display属性设置位block,以块级元素显示。

    height:auto相关元素的高度取决于浏览器。

    max-width:100%会重写任何通过width属性指定的宽度。

    全局显示:BootStrap使用了body{margin:0;}来移除body的边距。

    排版:使用@font-family-base、@font-size-base、@line-height-base

    链接样式:@link-color设置全局链接的颜色  focus--->hover--->active

    BootStrap使用Normalize来建立跨浏览器的一致性。

    BootStrap3的container calss用于包裹页面上的内容

    .container{

    padding-right:15px;

    padding-left:15px;

    margin-right:auto;

    margin-left:auto;

    }

    container的左右 外边距(margin-right,margin-left)交由浏览器决定

    由于内边框(padding)是固定宽度

  • 相关阅读:
    【面积并】 Atlantis
    【动态前k大 贪心】 Gone Fishing
    【复杂枚举】 library
    【双端队列bfs 网格图建图】拯救大兵瑞恩
    【奇偶传递关系 边带权】 奇偶游戏
    【权值并查集】 supermarket
    CF w4d3 A. Pythagorean Theorem II
    CF w4d2 C. Purification
    CF w4d2 B. Road Construction
    CF w4d2 A. Cakeminator
  • 原文地址:https://www.cnblogs.com/cye9971-/p/10604300.html
Copyright © 2011-2022 走看看