bootstrap 简介

最新推荐文章于 2025-09-12 23:34:04 发布

weixin_30655569

最新推荐文章于 2025-09-12 23:34:04 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

文章标签：前端框架 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/dalun101/p/9380585.html

bootstrap

　　简单、直观、强悍的前端开发框架，让web开发更迅速、简单。
　　来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap
　　是基于HTML、CSS、JavaScript的，让书写代码更容易。移动
　　优先，响应式布局开发。

　　bootstrap中文网址：http://www.bootcss.com/

一、引入：

二、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