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

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

建设网站需要的Bootstrap介绍与操作相关推荐

13-企业网站数据库-企业介绍数据操作
13-企业网站数据库-企业介绍数据操作文章目录 13-企业网站数据库-企业介绍数据操作项目描述企业网站数据库操作要求如下: (1)任务描述项目描述随着互联网技术的日益成熟,企业网站有&quo ...
mysql数据库建设网站,网站设计与建设-MySQL数据库【松柏书屋】
<网站设计与建设-MySQL数据库[松柏书屋]>由会员分享,可在线阅读,更多相关<网站设计与建设-MySQL数据库[松柏书屋](64页珍藏版)>请在人人文库网上搜索. 1.第2 ...
个人建设网站流程解说，手把手教你如何在阿里云上搭建自己的网站
现如今信息化时代,很多企业甚至是个人都有自己搭建网站的需求,目前建站有两方式,第一:找网络公司全程负责搭建:第二:自己建设:找网络公司建设网站市场价格不一,网络公司的实力技术也不一样,所以会有很多的建 ...
JavaEE中级.20190601.Bootstrap（Bootstrap介绍.Bootstrap 特点.下载与使用.布局容器.栅格网格系统.排版）
一.Bootstrap介绍 1.官网:http://getbootstrap.com/ 中文网:http://www.bootcss.com/ Bootstrap是一套现成的CSS样 ...
简单的电子商务网站设计方案和功能介绍
简单的电子商务网站设计方案和功能介绍这份电子商务方案书非常简单,适用在要求简单的小型企业电子商务网站建设. 站点功能和需求分析网站设计成含数据库功能的ASP动态网页.主要包含以下功能: FLASH ...
浅谈企业建设网站的作用和好处
现在在互联网的热潮下,越来越多的企业都开始走上线下线上结合的营销之路,而这一前提就是首先得有一个网站.一些企业对于建设网站的作用是什么,能给企业带来哪些好处都不太了解,只是觉得在大环境下自己也得搭建一 ...
第1节-从0到1快速建设网站-最终实现商业化盈利
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
建设网站-个人电子图书馆
现在人们日常生活中接触到各种网站,像购物的淘宝.京东,看视频的优酷.爱奇艺,然鹅我一直想拥有自己的个人网站,比如一个电子图书馆.刚刚又在哔哩哔哩中了解到有一款calibre-web的个人网站,它是图书 ...
高效建设网站管理网站的功能有哪些呢?
一.数据可视化一个网站如果缺少运营技术分析,而盲目的去运营和投放,是很难触发到精准的客户的,从而浪费大量资源和精力,而数据可视化就完美的解决了这一点.在后台支持实时统计访问数据,从而了解数据概况,依 ...

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

建设网站需要的Bootstrap介绍与操作相关推荐

最新文章

热门文章