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)是固定宽度

  • 相关阅读:
    串 --- 匹配
    串 --- 匹配
    计算几何 --- 哈希优化
    哈希 --- 线性探测法
    拓扑排序 --- 反向建图
    swift学习
    CocoaPods安装教程 pod setup很慢解决方案
    Adobe Fireworks CS6 Mac破解版
    iStat for mac
    mac环境下清理系统垃圾clearMyMac 3.9 破解版
  • 原文地址:https://www.cnblogs.com/cye9971-/p/10604300.html
Copyright © 2011-2022 走看看