bootstrap-自适应企业网站demo(一)

news/2024/5/17 5:12:39/文章来源:https://blog.csdn.net/hdvgsj/article/details/80164085

1.获取bootstrap文件

    英文官网:http://getboostrap.com

    中文官网:http://www.bootcss.xom

2.开发工具

    开发工具选择WebStorm

3.创建基础文件

    在WebStorm创建一个空的项目。

    将下载的bootstrap文件解压,将文件夹下的css、fronts、js文件夹拷贝到项目下。

    在项目下创建index.xml:

        1)IE8开启标准渲染模式

        meta标签控制IE渲染标准模式和兼容模式

<meta http-equiv="X-UA-Compatible" content="IE-edge">

        X-UA-Compatible的值有两种:

                a.版本号  content=“IE-edge”

                “IE-8”  代表强制以IE8标准模式渲染页面,忽略文档类型声明。

                  "IE-edge" 始终以最新的文档模式来渲染页面,忽略文档类型声明。

                b.Emulate+IE版本号

                如果声明了文档类型,则以IE版本号标准模式渲染页面,否则将文档设置为IE5。

        2)配置视窗

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

        width:控制设备的宽度,用于在不同分辨率的设备浏览。

        initial-scala=1:确保网页加载时,以1:1的比例呈现,不会有任何的缩放。

        user-scalable=no:在移动浏览器上,禁用其缩放。       

         通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

        3)引入jQuery文件(body)

        jQuery的js文件要放在bootstrap的js之前

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        4)引入boostrap  css和js文件

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>

4.国内CDN加速

    百度:http://cdn.code.baidu.com

    360:   http://libs.useso.com


项目结构:


完整代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!--IE8开启标准渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--配置视窗--><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>bootstrap项目实战</title><link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_893874.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鼠标事件 onmouseover、onmouseenter、onmouseleave和onmouseout

触发时机&#xff1a; onmouseout&#xff1a;鼠标滑出 onmouseover&#xff1a;鼠标滑过&#xff08;在表面经过即可&#xff09; onmouseenter&#xff1a;鼠标进入&#xff08;进入到里面&#xff09; onmouseleave&#xff1a;鼠标离开 onmouseover 和 onmouseenter 的区…

黑客攻防技巧:2分钟入侵网站全程实录(组图)

说起流光、溯雪、乱刀&#xff0c;可以说是大名鼎鼎无人不知无人不晓&#xff0c;这些都是小榕哥的作品。每次一提起小榕哥来&#xff0c;我的崇拜景仰就如滔滔江水&#xff0c;连绵不绝 ~~~~(又来了!) 让我们崇拜的小榕哥最新又发布了SQL注入 工具 &#xff0c;这回喜欢利用S…

SQL Server 2005全文检索技术在网站上的应用实录

SQL Server 2005全文检索技术在网站上的应用实录(1) 一、前言 “人类失去搜索&#xff0c;世界将会怎样?”&#xff0c;同样&#xff0c;很难想象一个拥有极大信息量的行业网站门户没有站内全文搜索将会出现怎样的局面&#xff0c;网站全文检索对于挖掘网站信息和整合网站资源…

部署创作的网站元素自定义项

http://technet.microsoft.com/zh-cn/library/cc262041.aspx 更新&#xff1a; 2008-01-17 本文内容&#xff1a; 使用内容部署功能部署内容 使用内容部署包部署内容 使用解决方案包部署内容 本文提供有关使用 Microsoft Office SharePoint Server 2007 部署创作的网站元素…

部署开发的网站元素自定义项

http://technet.microsoft.com/zh-cn/library/cc262995.aspx 更新&#xff1a; 2008-01-17 本文内容&#xff1a; 使用解决方案包部署开发的网站元素 使用功能部署开发的网站元素 本文提供有关使用 Microsoft Office SharePoint Server 2007 部署开发的网站元素自定义项的指…

【软创实验室大作业】学习小组网站

Java部分 封装一个数据结构&#xff0c;这里我选择了双向循环链表&#xff0c;也叫双链表。先简单介绍一下&#xff0c;双向循环链表的每个数据节点都有两个指针&#xff0c;分别指向直接后继和直接前驱。所以&#xff0c;从双向链表的任意一个节点开始&#xff0c;都可以很方…

chatgpt赋能python:Python与SEO的奇妙关系

Python与SEO的奇妙关系 SEO(Search Engine Optimization)&#xff0c;中文翻译为搜索引擎优化&#xff0c;是指通过对网站进行各种技术和内容方面的优化&#xff0c;来提升网站在搜索引擎自然排名中的位置&#xff0c;进而吸引更多的潜在客户。而Python语言&#xff0c;则成为…

chatgpt赋能python:Python一直运行的SEO文章

Python一直运行的SEO文章 介绍 Python是一种高级编程语言&#xff0c;已经流行了近三十年。它拥有简单易读的语法和强大的功能&#xff0c;可以运行在Windows、Linux和MacOS等多个平台上。Python已经成为了Web开发、数据科学、人工智能和网络安全领域的首选语言。 在SEO领域…

chatgpt赋能python:Python开发在SEO的应用

Python 开发在 SEO 的应用 介绍 Python 是一种高级、可解释性、面向对象的编程语言&#xff0c;它具有可扩展性和良好的表示能力。Python 是一种广泛应用于网络开发、科学计算、人工智能、数据分析等领域的语言。Python 已经成为许多 SEO 网站的首选开发语言&#xff0c;因为…

学成在线网站知识分享

学成在线网站知识分享 学成在线网站是一个比较基础的网页布局&#xff0c;让刚刚学习前端的人通过使用工具测量大小&#xff0c;裁剪图片&#xff0c;使用盒子定位布局&#xff0c;利用浮动放置浮动盒子等各种知识点都会使用到。各大教学网站也会使用这个案例来教学基础的布局…

摄影图片分享网站制作

摄影图片分享网站制作 目录 前言 一、首页的制作 二、风景篇和美食篇 三、人物篇和联系我们篇 总结 前言 上一次分享了学成在线网站的制作知识分析&#xff0c;这一次我来分享我制作摄影图片分享网站的制作了。这一次的网页制作需要用到新的东西&#xff0c;让我们一起来看…

Java学习网站推荐

学习Java不仅依靠自身的努力,还要多看一些相关技术文档,那么必不可少的就是学习Java的网站,本人整理收集一些Java学习网站,这些网站可以提供一些最新Java的资料,有时定期开设讲座等线下活动,而且里面的一些Java相关的问题以及讨论,不仅适用于Java小白程序员,而且还适用…

java在线电影网站

Java在线电影网站 项目简介 这次分享一个电影网站&#xff0c;基于JspServletC3p0mysql&#xff0c;难度适中。网站内视频均是跳转到相应的平台播放&#xff08;如腾讯视频、爱奇艺、优酷等&#xff09;&#xff0c;后台管理员可观察在线人数&#xff0c;并添加新的视频&…

Vue入门——我的第一个vue网站

今天我们来谈一谈Vue的相关事宜。 环境的搭建&#xff0c;网上教程很多&#xff0c;而且也很方便&#xff0c;我就不细说了。 然后我们新建一个文件夹作为它的工作环境——workspace。之后控制台进入到这个文件夹里面&#xff0c;然后执行下面代码来创建我的第一个项目。 vu…

预编译解决vue-cli 4.0项目的seo问题

预编译解决vue-cli 4.0项目的seo问题# vue项目上线之后要求解决一下seo问题&#xff0c;现在总结一下 希望能帮到各位 ps&#xff1a;其实网上已经有很多的解释了 我这边就不多做介绍 贴一下vue-cli和依赖的版本 1&#xff0c;需要用到我们的prerender-spa-plugin 和 vue-meta…

前端学习demo网站

https://www.layui.com/demo/progress.html http://semantic-ui.com/

从 0 学习 Go 语言 - 3 个入门学习网站

阅读本文大概需要 3 分钟。 前几天上网找了一些 Go 语言的学习资料&#xff0c;最后筛选了 3 个&#xff0c;今天整理分享给大家。 1、Go 官网 龙哥我在学习一门新技术时候&#xff0c;首先去的就是它的官网&#xff0c;看它的官方原汁原味的英文文档。 这样的好处是可以锻炼…

详细介绍:如何用WordPress制作会议网站(还没写完。。。)

WordPress网站制作 WordPress是使用PHP语言开发的博客平台&#xff0c;用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。全球约34%的网站都在用WordPress、小到兴趣博客、大到新闻网站&#xff0c;国外的学校里甚至都有WordPress相关的课程。在中国WordPress没有…

网站业务架构演变过程

网站业务架构演变过程 有一天&#xff0c;我突发奇想创建了一个站点&#xff0c;基于LNMP架构&#xff0c;起初只有我自己访问&#xff0c;后来因为我点儿正&#xff0c;访问量越来越大&#xff0c;所以最终导致下面的架构演变。 1. 单台机器因为只是一个小站&#xff0c;访问…

OpenCms创建网站过程图解

http://blog.csdn.net/qianxuncms/archive/2007/04/09/1557694.aspx 很多人都听说了OpenCms&#xff0c;知道了它的强大&#xff0c;索性的下载安装了&#xff0c;终于见到了久违OpenCms&#xff0c;看到了它简洁的界面&#xff0c;欣喜过后却不免一脸茫然&#xff0c;这个东西…