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

    bootstrap : 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
    用于项目样式的快速搭建,真的是。。特别快。。

    随便找两个cdn引用就能使用了。

    https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css
    https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js
    

    网格系统:

    必须包含在.container类之中

    基本结构
    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>
    

    其中,col-m1-m2

    m1值的是什么设备,一般有xs超小设备,sm小型平板电脑,md中型台式电脑,lg大型台式电脑
    m2值的是列,这一列的长是多少,范围是lng1,lng12, 当其是12的时候,正好是扩展到整行。
    col-md-offset-3 在m2前面加入offset,指示偏移,offset的范围是1到11

    可以注意的是:行列,还可以嵌套使用。

    常用类

    bootstrap 已经为很多常用的html 标签,添加了基础的样式,其上更是有很多常用的类,直接写这些常用的类,可以大大地加快开发速度。
    比如:

    .table .btn .btn-default  .img-rounded
    

    组件式地开发。。
    现在已经有各种bootstrap在线化的定制工具了。。
    比如

    Layoutit,Bootstrap Magic,Fancyboot,Bootsnipp
    

    前端。。真的快跟写ppt一样了。。

  • 相关阅读:
    452.用最少数量的箭引爆气球
    134.加油站
    Javascript
    spring-JDBC模板
    AOP注解方式ApsectJ开发
    AOP通知类型
    AOP的使用
    AOP相关术语
    AOP
    IOC注解详解
  • 原文地址:https://www.cnblogs.com/whyaza/p/11527310.html
Copyright © 2011-2022 走看看