编程 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 相关文章推荐

JS弹出层的显示与隐藏示例代码

Dec 27 Javascript

jquery删除数据记录时的弹出提示效果

May 06 Javascript

jquery常用操作小结

Jul 21 Javascript

JS采用绝对定位实现回到顶部效果完整实例

Jun 20 Javascript

详解微信小程序开发之城市选择器城市切换

Jan 17 Javascript

详解AngularJS中$filter过滤器使用(自定义过滤器)

Feb 04 Javascript

JS查找英文文章中出现频率最高的单词

Mar 20 Javascript

package.json文件配置详解

Jun 15 Javascript

利用JS实现scroll自定义滚动效果详解

Oct 17 Javascript

js验证身份证号码记录的方法

Apr 26 Javascript

vue实现动态按钮功能

May 13 Javascript

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

May 15 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

Linux系统下使用XHProf和XHGui分析PHP运行性能

2015/12/08 PHP

php利用header函数下载各种文件

2016/08/24 PHP

使用TextRange获取输入框中光标的位置的代码

2007/03/08 Javascript

JavaScript入门教程(6) Window窗口对象

2009/01/31 Javascript

js实现图片拖动改变顺序附图

2014/05/13 Javascript

node.js中的events.emitter.removeAllListeners方法使用说明

2014/12/10 Javascript

jquery实现可拖拽弹出层特效

2015/01/04 Javascript

jQuery中parentsUntil()方法用法实例

2015/01/07 Javascript

Node.js 异步编程之 Callback介绍（一）

2015/03/30 Javascript

jQuery为动态生成的select元素添加事件的方法

2016/08/29 Javascript

微信小程序解析网页内容详解及实例

2017/02/22 Javascript

js中DOM三级列表（代码分享）

2017/03/20 Javascript

详解微信小程序 template添加绑定事件

2017/06/23 Javascript

分享19个JavaScript 有用的简写写法

2017/07/07 Javascript

JavaScript基础之流程控制语句的用法

2017/08/31 Javascript

js时间戳与日期格式之间转换详解

2017/12/11 Javascript

解决axios发送post请求返回400状态码的问题

2018/08/11 Javascript

JS 正则表达式验证密码、邮箱格式的实例代码

2018/10/28 Javascript

微信小程序自定义带价格显示日历效果

2018/12/29 Javascript

C#程序员入门学习微信小程序的笔记

2019/03/05 Javascript

arctext.js实现文字平滑弯曲弧形效果的插件

2019/05/13 Javascript

如何使用原生Js实现随机点名详解

2021/01/06 Javascript

在树莓派2或树莓派B+上安装Python和OpenCV的教程

2015/03/30 Python

Python中文件I/O高效操作处理的技巧分享

2017/02/04 Python

django实现前后台交互实例

2017/08/07 Python

python 获取文件下所有文件或目录os.walk()的实例

2018/04/23 Python

基于python3 OpenCV3实现静态图片人脸识别

2018/05/25 Python

Python HTMLTestRunner如何下载生成报告

2020/09/04 Python

波兰化妆品和护肤品购物网站：eKobieca

2019/08/30 全球购物

什么是设计模式

2012/06/17 面试题

党的群众路线教育学习材料

2014/05/12 职场文书

2014年团工作总结

2014/11/27 职场文书

高三语文复习计划

2015/01/19 职场文书

单位工资证明范本

2015/06/12 职场文书

SQLServer RANK() 排名函数的使用

2022/03/23 SQL Server

Win10系统搭建ftp文件服务器详细教程

2022/08/05 Servers