第一次接触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 相关文章推荐
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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 DataGrid 实现代码
2009/08/12 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python三元运算实现方法
2015/01/12 Python
python追加元素到列表的方法
2015/07/28 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python多线程同步实例教程
2019/08/11 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
项目副经理岗位职责
2013/12/30 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
查摆问题整改措施
2014/10/24 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL