后台程序员简单应用前端的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的简单写法。
后台程序员简单应用前端的bootstrap(小白)的更多相关文章
- 程序员面试京东前端,现场JavaScript代码写出魔方特效
程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...
- 12款程序员们最爱的Bootstrap模板
如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完 ...
- SQL性能优化十条经验,后台程序员都需要掌握
1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'—— 红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 解决办法: 其实只需要对该脚本略做改进,查询速度便会 ...
- 程序员简单打造一个灵活智能的自动化运维系统C#实例程序
你是一个程序员,被派去管理公司500台计算机.这些机器可能需要执行一些自动化任务,一台台手动操作会把你累死.重复性的工作还是交给电脑处理,怎么解决这个问题呢?一个自动化的运维系统是必须的.自己实现的好 ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- 后台程序员的HTTP缓存
1.后端程序员只需要关注请求头: if-None-Match //上一次response头中的ETag的值. 响应头: Etag //是URL的Entity Tag,用于标示URL对象是否改变,区分不 ...
- Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...
- 后端程序员写的前端js代码模板
看几天的javascript面向对象和基础等之类相关javascript的知识,因为自己是写php的,也写过java,所以想在写javascript代码的时候也能用上面向对象的思想, 折腾了一整天的j ...
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...
随机推荐
- 硬核讲解 Jetpack 之 LifeCycle 源码篇
前一篇 硬核讲解 Jetpack 之 LifeCycle 使用篇 主要介绍了 LifeCycle 存在的意义,基本和进阶的使用方法.今天话不多说,直接开始撸源码. 本文基于我手里的 android_9 ...
- [C++/JavaScript]数据结构:栈和数列>案例引入(数制的转换)
1 案例1:数制的转换 1.1 背景与原理 1.2 编程复现 (JavaScript版 复现) function convert(value, d){ stack = []; // 栈 result ...
- mysql允许远程机器连接
mysql> use mysql; Reading table information for completion of table and column names You can turn ...
- python之hashlib模块(MD5校验)
示例:大文件md5校验 def md5(fileMd5): import hashlib md5_value = hashlib.md5() with open(fileMd5,'rb') as f: ...
- composer全量镜像使用方法
原文网址:https://pkg.phpcomposer.com/ Packagist 镜像使用方法 还没安装 Composer 吗?请往下看如何安装 Composer . 镜像用法 有两种方式启用本 ...
- CF1187D Subarray Sorting
思路: 线段树好题.对a数组中的每个元素从左到右依次操作,判断最终是否能够转化成b数组.在此过程中使用线段树维护区间最小值判断是否能够进行合法操作. 实现: #include <bits/std ...
- 顺序表的基本操作【c语言】【创建、插入、删除、输出】
作为数据结构初学者,上课时对一些知识点掌握得不是很透彻,所以利用课余时间通过微博平台总结所学知识,加深对知识的见解,记录学习历程便于后需要时参考. #include<stdio.h> #i ...
- CDH6.2上配置各种对象存储
cm-hdfs: ufile: 还需添加jar包 S3:是自带jar包 OSS: CDH6不需要下载包, CDH5需要 core-site.xml 的群集范围高级配置代码段(安全阀) fs.oss.e ...
- 【AI】【人工智能】【计算机】人工智能工程技术人员等职业信息公示
人社厅发[2019]48号 各省.自治区.直辖市及新疆生产建设兵团人力资源社会保障厅(局).市场监管局.统计局,国务院各部门.各直属机构.各中央企业.有关社会组织人事劳动保障工作机构,中央军委政治工作 ...
- 使用jbc查询数据封装成对象的工具类
适用于获取Connection对象的util package com.briup.myDataSource; import java.io.FileReader; import java.io.Inp ...