bootstrap 简介
bootstrap
简单、直观、强悍的前端开发框架,让web开发更迅速、简单。
来自Twitter,是目前很受欢迎的前端框架之一。 Bootrstrap
是基于HTML、CSS、JavaScript的,让书写代码更容易。 移动
优先,响应式布局开发。
bootstrap中文网址:http://www.bootcss.com/
一、引入:
<script type='text/javascript' src='js/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
二、bootstrap 容器
container-fluid 流体
container
1170
970
750
100%
三、bootstrap 栅格系统
bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,
这些样式类组成了一套响应式、移动设备优先的流式栅格系统:
1、col-lg- #即小于1200折行排列,下面以此类推
2、col-md-#小于992折行排列
3、col-sm-#小于768折行排列
4、col-xs- #不折行排列
#列偏移:
col-md-4 col-md-offset-2
col-md-4 col-md-offset-2
#响应式布局伪代码:
#container有左右padding 15,row有左右margin -15,padding 15
<style>
.box{
height:200px;
max-width:200px;
background-color:gold;
border:1px solid #000;
margin:15px auto;
}
</style>
...
<div class='container'>
<div class='row'>
<div class='col-lg-3 col-mid-4 col-sm=6'><div class='box'></div></div>
<div class='col-lg-3 col-mid-4 col-sm=6'><div class='box'></div></div>
<div class='col-lg-3 col-mid-4 col-sm=6'><div class='box'></div></div>
<div class='col-lg-3 col-mid-4 col-sm=6'><div class='box'></div></div>
</div>
</div>
四、bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
五、bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、form-group-sm 小尺寸表单
六、bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右
七、bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
转载于:https://www.cnblogs.com/dalun101/p/9380585.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 什么 ...
最新文章
- 基于chyh1990/caffe-compact在windows vs2013上编译caffe步骤
- 泛型java 代码讲解_Java泛型详解
- GoWorld – 用Golang写一个分布式可扩展、可热更的游戏服务器
- 与众不同 windows phone (32) - Communication(通信)之任意源组播 ASM(Any Source Multicast)...
- ACM的输入输出总结
- 类的转换函数调用的优先级与是否用const修饰的关系
- 比IETEST更好用的浏览器兼容性测试软件[绿色]
- 全球44家机构,55位大佬,历时两年,打造最强NLG评测基准!
- Linux常用命令系列--export
- ELMAH--Using HTTP Modules and Handlers to Create Pluggable ASP.NET Components 77 out of 90 rated th
- 剑指offer面试题[9-3]-矩形覆盖
- mysql 导出所有函数_mysql 导入导出 包括函数或者存储过程
- PlaceHolder到底什么
- 工业园区与大型制造工厂企业食堂消费管理系统常见需求及解决方案
- Mac OS 系统的发展历史
- js刷新页面的几种方式与区别
- 手机浏览网页或打开app时莫名弹出支付宝领红包界面的原因及预防措施
- WPF编程,Live Charts使用说明(51)——X轴Y轴同时赋值的一种方法
- 企业如何操作网络口碑营销?
- SVN服务器下载与安装