编程 Javascript

第一次接触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框架

栅格系统中的列偏移（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实战教程

第一次接触Bootstrap框架

- Author -

夜雨羽翼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 双色表格实现代码

Dec 08 Javascript

JavaScript中也使用$美元符号来代替document.getElementById

Jun 19 Javascript

javascript之典型高阶函数应用介绍

Jan 10 Javascript

jQuery获取节点和子节点文本的方法

Jul 22 Javascript

使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

May 21 Javascript

JS防止网页被嵌入iframe框架的方法分析

Sep 13 Javascript

JS实现的适合做faq或menu滑动效果示例

Nov 17 Javascript

Canvas + JavaScript 制作图片粒子效果

Feb 08 Javascript

解决angularjs中同步执行http请求的方法

Aug 13 Javascript

微信小程序用户信息encryptedData详解

Aug 24 Javascript

使用 Vue 实现一个虚拟列表的方法

Aug 20 Javascript

Vue 实现对quill-editor组件中的工具栏添加title

Aug 03 Javascript

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

php类声明和php类使用方法示例分享

2014/03/29 PHP

php实现将wav文件转换成图像文件并在页面中显示的方法

2015/04/21 PHP

php curl批处理实现可控并发异步操作示例

2018/05/09 PHP

javascript 有用的脚本函数

2009/05/07 Javascript

JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码

2012/02/02 Javascript

jQuery使用动态渲染表单功能完成ajax文件下载

2013/01/15 Javascript

AngularJS HTML编译器介绍

2014/12/06 Javascript

jQuery实现有动画淡出效果的二级折叠菜单代码

2015/10/17 Javascript

基于jQuery实现二级下拉菜单效果

2016/02/01 Javascript

AngularJS 所有版本下载地址

2016/09/14 Javascript

jquery实现点击页面回到顶部

2016/11/23 Javascript

bootstrap table实现单击单元格可编辑功能

2017/03/28 Javascript

Angularjs自定义指令Directive详解

2017/05/27 Javascript

javascript高级模块化require.js的具体使用方法

2017/10/31 Javascript

ES6下子组件调用父组件的方法(推荐)

2018/02/23 Javascript

微信小程序js文件改变参数并在视图上及时更新【推荐】

2018/06/11 Javascript

提升node.js中使用redis的性能遇到的问题及解决方法

2018/10/30 Javascript

vue路由传参的基本实现方式小结【三种方式】

2020/02/05 Javascript

Javascript var变量删除原理及实现

2020/08/26 Javascript

vue组件入门知识全梳理

2020/09/21 Javascript

uniapp微信小程序实现一个页面多个倒计时

2020/11/01 Javascript

vue3 watch和watchEffect的使用以及有哪些区别

2021/01/26 Vue.js

[15:56]Heroes18_暗影萨满（完美）

2014/10/31 DOTA

[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26

2018/08/29 DOTA

[01:10]为家乡而战！完美世界城市挑战赛全国总决赛花絮

2019/07/25 DOTA

python base64 decode incorrect padding错误解决方法

2015/01/08 Python

python使用opencv按一定间隔截取视频帧

2018/03/06 Python

python开发之anaconda以及win7下安装gensim的方法

2019/07/05 Python

Python如何省略括号方法详解

2020/03/21 Python

Clarks西班牙官方在线商店：clarks鞋

2019/05/03 全球购物

音乐学院硕士生的自我评价分享

2013/11/01 职场文书

云南省召开党的群众路线教育实践活动总结会议新闻稿

2014/10/21 职场文书

社区好人好事材料

2014/12/26 职场文书

上诉答辩状范文

2015/05/22 职场文书

Python 数据结构之十大经典排序算法一文通关

2021/10/16 Python

springboot+rabbitmq实现智能家居实例详解

2022/07/23 Java/Android