第一次接触Bootstrap框架


Posted in Javascript onOctober 24, 2016

关于Bootstrap,话不多说,直接进入主题:

安装

可以通过bootstrap官方网站下载安装

可以通过Bower安装(关于bower一种包管理器,本文不做详解)

bower install bootstrap

可以通过npm安装(关于npm可以阅读)

npm install bootstrap

项目中引入Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BootstrapDemo</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">
</head>

布局容器

.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
 
 </div>

.container-fluid 类用于100%宽度,占据全部视口(viewport)的容器

<div class="container-fluid">
 
 </div>

栅格系统

Bootstrap提供了一套响应式的, 移动优先的流式栅格系统, 随着屏幕或视口(viewport)尺寸的不同, 系统会自动的分成12份;

栅格系统是通过一系列的行(row)和列(column)的组合来创建页面布局;

“行(row)”必须包含在.container或.container-fluid容器中,

栅格系统中的媒体查询

第一次接触Bootstrap框架

栅格系统中的参数

第一次接触Bootstrap框架

案例代码

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">
 <style>
 .container .row div {
 background-color: grey;
 border:1px solid red;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">2</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">3</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">4</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">5</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">6</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">7</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">8</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">9</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">10</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">11</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">12</div>
 </div>
</div>
</body>

页面效果会随着屏幕的大小col-lg-, col-md- ,col-sm-, col-xs- 显示不同的效果

第一次接触Bootstrap框架

第一次接触Bootstrap框架

第一次接触Bootstrap框架

第一次接触Bootstrap框架

栅格系统中的列偏移(offsets)
col-lg-offset-

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">

 <style>
 .container .row div {
 background-color: grey;
 border:1px solid red;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
 <div class="col-lg-offset-11 col-lg-1">row - col -1</div>
 </div>
</div>
</body>

效果如下(偏移了11列)

第一次接触Bootstrap框架

栅格系统中的列嵌套

<div class="container">
 <div class="row">
 <div class="col-lg-4 col-md-2 col-sm-3 col-xs-6">1</div>
 <div class="col-lg-8 col-md-2 col-sm-3 col-xs-6">2
 <div class="row">
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">3</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">4</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">5</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">6</div>
 </div>
 </div>
 </div>
</div>

效果如下

第一次接触Bootstrap框架

流式布局容器

 将最外面的布局元素.container 改为.container-fluid,就可以将固定的栅格布局转换为100%宽度的布局

<div class="contaienr-fluid">
 <div class="row">
 
 </div>
</div>

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

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

Javascript 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
js添加绑定事件的方法
May 15 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
Node.js Sequelize如何实现数据库的读写分离
Oct 23 #Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 #Javascript
Javascript 实现简单计算器实例代码
Oct 23 #Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 #Javascript
jquery 实现回车登录详解及实例代码
Oct 23 #Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 #Javascript
web前端开发upload上传头像js示例代码
Oct 22 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
python中文编码问题小结
2014/09/28 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python代码如何注释
2020/06/01 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
干部下基层实施方案
2014/03/14 职场文书
奠基仪式策划方案
2014/05/15 职场文书
解放思想演讲稿
2014/09/11 职场文书
赔偿协议书
2015/01/27 职场文书
店长岗位职责
2015/02/11 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
新学期家长寄语2016
2015/12/03 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
用python画城市轮播地图
2021/05/28 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL