Bootstrap学习笔记之css样式设计(1)


Posted in Javascript onJune 07, 2016

由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练。

一、bootstrap是什么?

bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可。

怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同。

bs好处:增加了开发效率,页面设计更加美观,支持响应式开发。下载地址:https://github.com/foreverjiangting/bootstrap

学习文档:http://v3.bootcss.com/getting-started/

二、css样式设计

1.基于Html文档

bootstrap引用了部分html元素,所以头部需写成下面所示的样列。

<!DOCTYPE html> ---包含HTML5文档声明,所有浏览器均开启标准模式
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!确保支持响应式布局 -->
<title>Bootstrap</title>
[/code][code]<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件(一般不用引入) --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

2.栅格系统布局

通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局,比如设置三个等宽的列:

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 设置栅栏式布局-->
<div class="container"><!--或者container-fluid-->
 <div class="row">  -- col-xs-4 : 指小于768px的小设备
  <div class="col-xs-4">11</div> -- col-sm-4 :指>=768px的设备
  <div class="col-xs-4">22</div> -- col-md-4 :指>=992px设备
  <div class="col-xs-4">33</div> -- col-lg-4 :值1200px设备
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4">22</div>
  <div class="col-md-4">33</div>
 </div>
 <div class="row">
  <div class="col-sm-4">11</div>
  <div class="col-sm-4">22</div>
  <div class="col-sm-4">33</div>
 </div>
 <div class="row">
  <div class="col-lg-4">11</div>
  <div class="col-lg-4">22</div>
  <div class="col-lg-4">33</div>
 </div>

</div>
</body>
</html>

css网格式有四种写法,主要应用于不同设备的分辨率。

2:平移列

使用offset来进行平移。即平移的列数

<div class="container"><!--或者container-fluid-->
 <div class="row">
  <div class="col-xs-4">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-offset-2 col-xs-4">33</div>---指33向右平移了两列
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4 col-md-offset-2">22</div>
  <div class="col-md-4">33</div>
 </div> 
 <div class="row">
 <div class="col-md-4">11</div>
 <div class="col-md-4 col-md-offset-2">22</div> 
 <div class="col-md-4">33</div> 
 </div> 
</div>
<!-- 平移列-->

效果如下:

Bootstrap学习笔记之css样式设计(1)

33由于平移了两列,不能满足它占4列的要求,于是被挤到下一行开始占据4列。简单来说,相当于将整个div块右移。

Bootstrap学习笔记之css样式设计(1)

3:嵌套列

即在网格列里面再嵌套列。我们对比来看。

<div class="container"><!--或者container-fluid-->
 <div class="row">
  <div class="col-xs-8">
  <div class="col-xs-2">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-2">33</div>
  </div>
 </div>
 <div class="row"> 
  <div class="col-xs-8">11</div>
 </div>
 <div class="row"> 
  <div class="col-xs-4">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-4">33</div>
 </div> 
 
</div>

效果如下:

Bootstrap学习笔记之css样式设计(1)

有没有发现问题?为什么上面的没有平均分配8?
原因:我们来看下调试控制台

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
 min-height: 1px;
 padding-left: 15px;
 padding-right: 15px;
 position: relative;
}

发现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表示拉。

<div class="row"> 
  <div class="col-xs-4">21</div>
  <div class="col-xs-8">24</div> 
 </div>
 <div class="row">
 
  <div class="col-xs-4 col-xs-push-8">21</div>
  <div class="col-xs-4 col-xs-pull-4">24</div> 
 
 </div>

效果图如下:

Bootstrap学习笔记之css样式设计(1)

<div class="col-xs-4 col-xs-push-8">21</div>---记为div1
 <div class="col-xs-8 col-xs-pull-4">24</div>---记为div2

即可理解为交换两者位置,需要将div1向右推8列,div2需要向左拉4列。

三、流式网格布局
1.列宽使用百分比,而不是像素
2.将row类换成row-fluid
3.其它基本功能与上面的固定布局一样,支持响应式。
4.平分某一个列时,由于流式布局采用的是百分比,所以应该按照6来计算。

//注意下面这种情况,平分8列时,并不是设置它为两个4,而是两个6,因为bootstrap中是12列栅格分布。
 <div class="row">
 <div class="col-xs-8">
  <div class="col-xs-6">2</div>
  <div class="col-xs-6">2</div>
 
 </div>
 </div>

下面来看一下流式布局的应用,对比固定布局来看。

<!-- 流式布局-->
<div class="container">
 <div class="col-xs-6">333</div>
 <div class="col-xs-6">444</div>
</div>
<div class="container-fluid"> ---声明container-fluid类,表明内容是流式布局,作用:作为一个包含块,来包含流式内容
 <div class="row-fluid">
  <div class="col-xs-6 col-md-12">333</div>
  <div class="col-xs-6 col-md-12">444</div>

 </div>
</div>

<div class="row-fluid"> ----没用声明container和container-fluid类,此时为屏幕的宽度
  <div class="col-xs-6">333</div>
  <div class="col-xs-6">444</div>

</div>

当屏幕小于768px时,效果如下:

Bootstrap学习笔记之css样式设计(1)

当屏幕大于992px时,效果如下:此时独占一行

Bootstrap学习笔记之css样式设计(1)

row-fluid类(非常重要),决定是否是流布局。然后里面的内容块代码编写与网格系统一致,依然是从col-md-1到col-md-12,分别对应于不同的百分比.

Bootstrap学习笔记之css样式设计(1)

四、响应式设计
简单来说就是支持不同设备(手机,PC)的分辨率(960PX,1366PX,978PX等等)进行自适应响应。

<div class="row"> 
  <div class="col-xs-6 col-md-12">21</div>
  <div class="col-xs-6 col-md-12">24</div> 
 
 </div>

当设备小于768px时,效果如下:

Bootstrap学习笔记之css样式设计(1)

当设备>=992px时。效果如下:

Bootstrap学习笔记之css样式设计(1)

上面两种类,分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 #Javascript
PassWord输入框代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 #Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 #Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 #Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 #Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
SVG实现时钟效果
2018/07/17 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
python中global用法实例分析
2015/04/30 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python 自由定制表格的实现示例
2020/03/20 Python
详解anaconda安装步骤
2020/11/23 Python
pandas实现导出数据的四种方式
2020/12/13 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Sql面试题
2013/03/20 面试题
总经理岗位职责
2015/02/04 职场文书
2015年护士节活动总结
2015/02/10 职场文书
肖申克救赎观后感
2015/06/02 职场文书
趣味运动会广播稿
2015/08/19 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL