bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练。
一:bootstrap是什么?
bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可。
怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同。
bs好处:增加了开发效率,页面设计更加美观,支持响应式开发。
二:css样式设计
1:基于Html文档
bootstrap引用了部分html元素,所以头部需写成下面所示的样列。
JavaScript Code复制内容到剪贴板 ---包含HTML5文档声明,所有浏览器均开启标准模式
Bootstrap
Hello, world!
2:栅格系统布局
通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局,比如设置三个等宽的列:
JavaScript Code复制内容到剪贴板
-- col-sm-4 :指>=768px的设备
-- col-md-4 :指>=992px设备
-- col-lg-4 :值1200px设备
css网格式有四种写法,主要应用于不同设备的分辨率。
2:平移列
使用offset来进行平移。即平移的列数
XML/HTML Code复制内容到剪贴板
---指33向右平移了两列
效果如下:
33由于平移了两列,不能满足它占4列的要求,于是被挤到下一行开始占据4列。简单来说,相当于将整个div块右移。
3:嵌套列
即在网格列里面再嵌套列。我们对比来看。
XML/HTML Code复制内容到剪贴板
效果如下:
有没有发现问题?为什么上面的没有平均分配8?
原因:我们来看下调试控制台
发现padding-left 和padding-right均为15px,这是因为,列与列之间存在padding值得影响,那为什么第二个div没有影响呢?我们来探究一下栅栏格的原理。
1:“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
2:通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding
也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
注意:此时row已经把列的padding给抵消了,所以,没有出现padding的值情况。
4:列排序
主要是使用col-xs-push-* col-xs-pull-*(*表示0-11的数字)如何理解这两个类呢?push表示推,pull表示拉。
XML/HTML Code复制内容到剪贴板
效果图如下:
---记为div1
---记为div2 即可理解为交换两者位置,需要将div1向右推8列,div2需要向左拉4列。
三:流式网格布局
1:列宽使用百分比,而不是像素
2:将row类换成row-fluid
3:其它基本功能与上面的固定布局一样,支持响应式。
4:平分某一个列时,由于流式布局采用的是百分比,所以应该按照6来计算。
XML/HTML Code复制内容到剪贴板//注意下面这种情况,平分8列时,并不是设置它为两个4,而是两个6,因为bootstrap中是12列栅格分布。
四:响应式设计
简单来说就是支持不同设备(手机,PC)的分辨率(960PX,1366PX,978PX等等)进行自适应响应。
XML/HTML Code复制内容到剪贴板
当设备小于768px时,效果如下:
当设备>=992px时。效果如下:
上面两种类,分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。
以上这篇bootstrap学习心得总结-css样式设计分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
本文来源:bootstrap学习心得总结-css样式设计分享--网页制作-脚本之家www.xccinema.net
c
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享相关推荐
- HTML5 混合APP开发学习笔记(三)——CSS样式设计
CSS样式设计 CSS高级特性 继承性 书写CSS样式时,子标签会自动继承父标签的某些样式,恰当地使用继承这个特性可以简化代码,降低CSS样式的复杂性 以下CSS样式不能被继承: 边框属性 边距和填充 ...
- 设计网页字体css,CSS样式设计网页字体与用户体验
CSS样式设计网页字体与用户体验 互联网 发布时间:2009-04-02 19:36:06 作者:佚名 我要评论 网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...
- MATLAB地图工具箱学习心得(二)设计可变参数和位置拾取的“放大镜”式投影程序
最近刚好因为一些原因整理这方面的内容,所以还是把这篇鸽了一年多的博客顺手写出来了∠( ᐛ 」∠)_.因为是当时课程设计的一部分,程序上难免会有一些不足和bug,在这里将设计的思路分享给大家. 本篇博客 ...
- 一些自己的学习心得希望与大家一起分享
学习心得 一. 强调动手,强调实践: 只有通过大量的实践才能不断的培养编程感觉:编程是有感觉的,就好象英语阅读一样,是有语感的:每天都要编写代码,不断培养编程感觉,正所谓熟能生巧! 二. ...
- Mr.J-- jQuery学习笔记(八)--CSS样式操作
CSS属性操作 在jQuery中,关于元素的样式操作方法共有2种: (1)CSS属性操作: (2)CSS类名操作: 三种设置方法 逐个设置 $("div").css("w ...
- Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...
- bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性.它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为. 运作方式 插件用 ...
- css 样式设计学习记录(0)
一. 如果想要达到如下图效果: 如果是想要设计出的样式,使两个字和四个字两头对齐,中间用空格隔开. 但是这里格式问题: 如果输入的空格是"半角空格",那么无论输入的 ...
- php的布局设计,php学习之div+css布局设计排版(六)
网页标题 .box {width:960px;border:1px solid red;margin:0px auto;} .box .header {width:100%;height:90px;b ...
最新文章
- 【bzoj1251】序列终结者(伸展树)
- 【转载】[Windows 8]Hello Windows 8 - Windows 8 Developer Preview搶先預覽
- PHP如何使用GeoIP数据库
- jsp中的basePath和path (绝对路径 相对路径)
- 5.16 Stacks and Queues
- Acwing 276. I-区域
- c语言计算机培训,C语言计算机基础学习||新手入门必看
- (1-1)line-height的定义和行内框盒子模型
- 信息学奥赛一本通(1319:【例6.1】排队接水)
- 安装服务器系统大概多久,安装服务器系统
- 中国气候变暖绝对是事实
- linux集群环境搭建
- 概述无线传感网的MAC协议
- java项目启动就调用方法_Java项目启动时执行指定方法的几种方式
- Android 应用程序无响应(ANR)报错原因
- Hashmasks背后的故事:以太坊上最牛艺术品诞生之路
- 必应每日一图php,自建必应每日一图API接口
- 小猪的Python学习之旅 —— 19.Python微信自动好友验证,自动回复,发送群聊链接
- Yii2实现手机二维码扫一扫登入
- CRF as RNN 代码解读
热门文章
- 位居中国机器学习公有云市场份额第一,华为云 ModelArts 的进阶之路
- 华为在 Linux Kernel 5.10 中代码贡献排名第一,中国 AI 足球队夺冠 | 开发者周刊
- 您的包裹“ MySQL灵魂十连” 待签收
- 求求了!让 Python 的热搜消失吧!!
- 每位开发者都应了解的数据库一致性!
- 听说Java老古董了?快被淘汰了?高级开发:我还就真看上它了!
- 5G + 云网融合,加速万物互联
- 中文深度学习入门书:小白易入,课程、实战项目全有 | 五位导师联合出品
- 余承东:华为6G研发还需10年;库克“iPhone 11势头强劲”;TensorFlow 2.0正式版发布​ | 极客头条...
- 解救开发者!鲲鹏、ModelArts、Atlas、5G MEC硬核来袭……