zoukankan      html  css  js  c++  java
  • 后台程序员简单应用前端的bootstrap(小白)

    原因:

    现在技术更新很快,我们需要掌握更多的语言和技术,公司现在也希望招全栈工程师。

    名词:

    bootstrap(前端框架),less(css的扩充)

    案例:

    在bootstrap中常用row行级元素来定义元素,比如说一个页面有许多板块组成的,这些板块我们可以看成是一个个的长方形框里面有文字有图片,我们写页面就要有一个基本的思想,这个页面我们可以分为几块,比如页面顶部,页面左部,页面右部,页面底部,我们拿最简单的一个页面举例。

    .container 类用于固定宽度并支持响应式布局的容器。<div class="container"></div>container的div包含着你写的所有HTML代码,然后我们用row定义页面布局了。

    比如顶部一个row<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>在这个div里你就可以写你的顶部代码了,

    row后的四个代码是支持不同宽度的屏幕的,比如手机,平板,pc端,想调各种大小就调这四个,我就不详细说了,可以去菜鸟教程或官网查询,row使用的时候会有15的边距当你想把宽度变小的时候用row,这里你也可以不用row包,

    我喜欢row 包起来写宽度比较合适,再来一个row现在写中间部分,里面包含了页面左部与页面右部 ,row一行有12个格子,相当于把页面宽度分为12份 , 先定义一个row加四个那种代码

    <div class="row">

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>       //这是页面左部

           <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">

        <div class="row">

          <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>  //右部的左边部分

          <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>  //右部的右边部分

        </div>  

      </div>  //这是页面右部

    </div>

    上面就是把一行分为两步份,左边与右边,如果你还想在右部分两个框

    row的宽度是比较小的所以要用padding来定义,padding是来调整高度的,

    flex这是用来布局的,是一种新出现的技术,我就不介绍了http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,可以自学

    最后再写底部了,row的边距可以用margin调,margin-left|right|top|bottom或padding-left|right|top|bottom来调整大小边距问题,css样式你可以用css写也可以用less写,再less里你可以完全用css写

    本篇文章适合公司要求用到上面技术而你没接触过的可以看看,下次介绍less的简单写法。

  • 相关阅读:
    httpclient_1
    jmeter java请求
    fiddler监听手机
    lr文件的作用?
    配置源
    数据结构--堆
    A + B Problem II 高精度
    最小生成树(kruskal算法)+prim算法
    P3371 【模板】单源最短路径(弱化版)
    P3368 【模板】树状数组 2(实现区间修改&单点查询)
  • 原文地址:https://www.cnblogs.com/dyj--php/p/7694734.html
Copyright © 2011-2022 走看看