响应式设计之Bootstrap框架教程

沙海
沙海
沙海
164
文章
2
评论
2018年5月15日22:17:27 评论 61 970字阅读3分14秒

概述

是html/css/js的一个集成框架 使页面的开发更加的简单,方便,快捷

作用

1 提供了大量的插件,用起来更加的简单方便

2 可以制作响应式页面的开发

响应式:制作一套项目页面可以兼容不同的设配(pc端 pad端 手机端)

Bootstrap的使用

快速入门

  • 1.bootstrap的中文学习网站: http://www.bootcss.com/
  • 2.下载bootstrap-3.3.5-dist —开发环境包  把解压后的3个文件导入要开发的项目中
  • 3.参考文档基本模板引入文件 (3个meta  1个css文件2个js文件)
  • 4.布局容器

Bootstarp的响应式页面技术实现原理(栅格系统)

栅格系统:随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

媒体查询:为我们的视图提供样式设定

当屏幕大于1200px的时候,我们可以选择使用提供好的样式来分列 col-lg-xx

当屏幕大于992并且小于1200px的时候,我们可以选择使用提供好的样式来分列 col-md-xx

当屏幕大于768并且小于992的时候,我们可以选择使用提供好的样式来分列 col-sm-xx

当屏幕小于768px的时候,我们可以选择使用提供好的样式来分列 col-xs-xx

Bootstarp的组成部分

组成部分:全局css样式 组件 javascript的插件

全局css样式 :提供了表格 按钮 图片 表单等

组件:提供了下拉菜单 分页 导航条等

javascript的组件:提供了模态框 轮播图等

Nginx服务器部署项目

需求:想将自己制作的首页让所有人都能访问到

条件: 使用服务器(nginx)

特点:存放到这个服务器上的项目可以让所有人通过浏览器去访问到

ps:只能放静态资源(html js css.图片) 不能存放动态资源(servlet/jsp)—tomcat服务器

注意:不能放在中文文件名下

方式一:直接将项目放入html文件夹中 通过浏览器访问项目名即可

方式二:通过配置文件的方式

location / {

root E:\bootstarp; (项目在磁盘的存放位置)

index index.html index.htm; (项目中默认打开的页面)

}

root:指定项目地址

index:指定要访问的页面

nginx命令:

启动服务器:start nginx

重新启动服务器:nginx -s reload

停止服务器:nginx -s stop

继续阅读
  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:响应式设计之Bootstrap框架教程 - GYHQQ社区 ☜(ˆ▽ˆ)
阿里云企业级云服务器新用户1折特惠
一个Java基础入门的教程视频
C语言项目源码打包分享
C语言速查手册
收藏排行榜分页查询功能 Java实战

收藏排行榜分页查询功能

收藏排行榜分页查询功能 需求分析 当用户需要查询当前网站那些旅游线路被收藏更多次或者更热门时,我们可以通过点击“收藏排行榜”导航栏超链接完成根据旅游线路表中收藏次数倒序查询数据,并将查询结果展示在fa...
JavaMail&定时器 Java

JavaMail&定时器

第1章 Filter拦截方式 1.1 include 当设置过滤器的拦截方式为include的时候,只有当使用include方式转发的请求才能被拦截 1.1.1 include拦截方式代码演示 1.创...
Linux搭建web环境手册 Redis

Linux搭建web环境手册

使用说明 说明:该笔记是在linux上安装jdk,mysql,tomcat,redis等软件,以便于建立一个linux系统下的web环境,具体安装过程的流程截图等可以参考我的另一篇图片教程:Linux...
Redis(缓存技术)教程 Java

Redis(缓存技术)教程

概述 Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库 为什么要使用redis? 场景: 在企业级开发,需要完成导航条的数据,但是导航条的数据一般都是来源于数据库,只要每个...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: