建设网站需要的Bootstrap介绍与操作

来源：互联网发布：大数据 hadoop 编辑：程序博客网时间：2024/06/13 05:21

01-流体布局

流体布局,就是使用百分比来设置元素的宽度,元素的高度值固定,

calc()：可以通过计算的方式给元素添加尺寸,比如:width:calc(25%-4px);

box-sizing：content-box默认的盒子计算方式 2.border-box 盒子的计算方式从边框开始,盒子的尺寸,边框和内填充算在盒子内

02-响应式布局

响应式布局就是使用媒体查询的方式,通过查询浏览器的宽度,在不同的宽度下应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局,响应式布局的页面可以适配多种终端屏幕(pc,平板,手机)

操作代码:

@media(max-width:1200px){
div{
width:25%
}

}

03-bootstrap介绍

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。

来自Twitter，是目前很受欢迎的前端框架之一。

Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。

04-bootstrap容器

1.流体容器

container-fluid流体容器
<div class="container-fluid">流体容器</div>

2.响应式固定容器

container

判断区间

1170

970

750

100%

<div class="container">响应式固定容器</div>

3.bootstrap响应式查询区间:

大于等于768

大于等于992

大于等于1200

4.bootstrap栅格系统

bootstrap将页面横向分为12等分,按照12等分定义了不同宽度等分的样式类,这些样式类组成了一套响应式,移动设备优先的流式栅格系统

col-log->1200排成一行,<1200 分别占一行

col-md->992排成一行, <992分别占一行

col-sm->768排成一行,小于768分别占一行

col-xs-始终占一行

列偏移

col-lg-offset-

col-md-offset-

col-sm-offset-

col-xs-offset-

bootstrap按钮

btn声明按钮

btn-default默认按钮样式

btn-primay卓越首位

btn-success

btn-info

btn-warning

btn-danger

btn-link

btn-lg

btn-md

btn-sx

btn-block宽度是父元素宽度100%的按钮

active

disabled

btn-group定义按钮组

bootstrap表单

form声明一个表单域
form-inline 内联表单域
form-horizontal 水平排列表单域
form-group 表单组、包括表单文字和表单控件
form-control 文本输入框、下拉列表控件样式
checkbox checkbox-inline 多选框样式
radio radio-inline 单选框样式
input-group 表单控件组
input-group-addon 表单控件组物件样式
input-group-btn 表单控件组物件为按钮的样式
form-group-lg 大尺寸表单
form-group-sm 小尺寸表单

bootstrap图片

img-responsive声明响应式图片

bootstrap字体图标

通过字体代替图标,font文件夹需要和css文件夹在同一级目录

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等固定内容的样式

9.nav navbar-nav 定义导航条中的菜单

10.navbar-form 定义导航条中的表单

11.navbar-btn 定义导航条中的按钮

12.navbar-text 定义导航条中的文本

13.navbar-left 菜单靠左

14.navbar-right 菜单靠右

路径导航

<olclass="breadcrumb">
<li><ahref="#">Home</a></li>
<li><a href="#">Library</a></li>
<liclass="active">Data</li>
</ol>

巨幕

<divclass="jumbotron">
<divclass="container">
...
</div>
</div>

bootstrap模态框

1.modal声明一个模态框

2.modal-dialog定义模态框尺寸

3.modal-lg定义大尺寸模态框

4.modal-sm定义小尺寸模态框

5.modal-header

6.modal-body

7.modal-footer

bootstrap下拉菜单

1.drapdown-toggle

2.dropdown-menu

bootstrap 隐藏类

1.hidden-xs

2.hidden-sm

3.hidden-md

4.hidden-lg

阅读全文

0 0