Bootstrap简介
1.使用准备
1.1 Bootstrap的下载
http://www.bootcss.com,下载用于生产环境的Bootstrap即可。
1.2 Bootstrap包含的内容
● 全局CSS:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
● 组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
● JavaScript 插件:是jQuery插件,带了一些其它的功能。如:轮播图。
1.3 Bootstrap的目录结构
2.创建模板
2.1 Bootstrap模板文件创建步骤
只需要创建一次,以后可以直接复制这个模板使用
● 复制三个文件夹css、js、fonts到项目目录下。
● 复制jQuery框架到js目录下。
● 复制“起步 ==> 基本模板"的代码到HTML中。
2.2 模板说明
<head><!‐‐ 1. 导入bootstrap中的css样式文件 ‐‐><link href="css/bootstrap.min.css" rel="stylesheet"><!‐‐ 2. 导入jQuery框架 ‐‐><script src="js/jquery‐3.2.1.min.js"></script><!‐‐ 3. 导入bootstrap的js文件 ‐‐><script src="js/bootstrap.min.js"></script></head>
3.栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的特点:
“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适
的排列(aligment)和内间距(padding)。
通过“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来
创建。
如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整
体另起一行排列。
关注微信公众号,随时随地学习
转载于:https://www.cnblogs.com/dintalk/p/10880032.html
Bootstrap简介相关推荐
- UA MATH566 统计理论10 Bootstrap简介
UA MATH566 统计理论10 Bootstrap简介 Bootstrap是用来替代基于CDF的一些统计计算的手段:当真实的CDF(记为F∈FF \in \mathbb{F}F∈F,F\mathb ...
- Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap简介: Bootstrap是Twitter(推特)开发的,目前最受欢迎的前端开源框架,基于jQuery用于开发HTML.CSS.JavaScript,简洁灵活,常用于开发响应式布局及 ...
- Bootstrap学习(一):Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
- Stata:Bootstrap 简介
作者: 吴雄(湘潭大学),童天天(中南财经政法大学) 连享会 Source: The Bootstrap in Stata 原文链接: 连享会-Bootstrap简介 文章目录 1. Boots ...
- Bootstrap学习:bootstrap简介(节选w3c菜鸟日记)
Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap ...
- 【BootStrap】Bootstrap简介、环境安装与基本模板
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] BootStrap简介 什么是BootStrap 它由Twitter的设计师Mark ...
- Bootstrap简介--目前最受欢迎的前端框架(一)
Bootstrap,是目前最受欢迎的前端框架. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. B ...
- Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
Bootrap是web前端CSS框架.它是基于css3和html5开发的,,它在jquery基础上进行完善.形成自己的风格,并兼容大部分的Jquery插件. bootstrap现有第四版.变化从Les ...
- 本地存储和移动端js框架及bootstrap简介
本地存储和移动端js框架 文章目录 本地存储和移动端js框架 一.本地存储 1.cookie 2.localStorage 3.sessionStorage 二.jquery UI 三.移动端js事件 ...
- Boostrap技能点整理之【bootstrap简介】
bootstrap,目前市面上最受欢迎HTML.CSS.JavaScript框架,用于开发响应式布局.移动设备优先的 WEB 项目. 从今天起,我们就开始整理bootstrap的相关技能点. 1 什么 ...
最新文章
- Nginx安装、默认虚拟主机、Nginx用户认证、Nginx域名重定向
- selinux-添加
- const深度总结(effective C++)
- springboot上传文件及文件上传限制大小异常捕获
- 特殊权限位set_uid set_gid stick_bit 软链接硬链接
- 用户体验五要素_Kwai竞品分析用户体验五要素
- java范型_Java知识点总结(Java泛型)
- mysql docker还是rds_容器化RDS:计算存储分离还是本地存储?
- 什么叫做展望_在迷茫的时代,选择相信:关于2021经济的一些展望。
- DPDK Release 20.02
- 软件测试实习面试都问啥?
- 桌面计算机地址栏在哪,电脑窗口地址栏清理
- abb和plcsocket通讯_abb与西门子plc通讯问题
- 《流浪方舟》- 废土世界的冒险之旅
- 【邀请函】2018年医院绩效改革方案构建与落地实践成果分享会
- c++编程 设置桌面壁纸以及设置壁纸失效的解决办法
- 3. linux 常见服务
- 【C语言基础】printf函数
- 当地图遇到微博,生活其实可以这么玩
- 关于校招和嵌入式软开的学习路线的总结和一些思考
热门文章
- 【Python CheckiO 题解】Index Power
- 【HDU - 6662】Acesrc and Travel(树形dp,博弈dp)
- 【POJ - 3268 】Silver Cow Party(Dijkstra最短路+思维)
- android 按钮按下缩放,android捏缩放
- consul 日志配置_Go语言微服务架构实战:第十一节 启动Consul
- 学习笔记13-C语言-字符串函数、缓冲区
- 俄罗斯方块(C++)
- leetcode326. 3的幂 如此6的操作你想到了吗
- 《Python Cookbook 3rd》笔记(5.17):将字节写入文本文件
- vue底部选择器_Vue组件-极简的地址选择器