浅谈,bootstrap,响应式网站

1什么是响应式网站?

  我刚进公司,项目经理给了我一个页面让我做

  

  我看到第一个要求就头大了,什么是bootstrap?? 不知道,什么是响应式支持???不知道,到是最后一个css与js与页面分离,

项目经理问我什么都不知道,感觉挺担心的,会不会因为这个把我踢了,呵呵,不过运气很好,项目经理只是让我把这方面的知识补补,

有问题怎么办?? 百度一下,这是我第一想到的,然后就去查了,

  

  bootstrap : 前端框架,一些做好的效果,里面的各种插件非常好,可以直接拿来用

  我就去bootstrap中文网下了几个版本,不知道是哪个文件干啥的

   

  就看bootstrap中文网上面的一些解释

进里面看了看

里面有很多解释,现在我也做了一个响应式的页面,大家有机会要指点小弟一把啊

  2.响应式

    我现在用的是@media获取屏幕宽度,来进行处理,比如要对小于800px把屏幕背景色变为红色

      ①现在html 里加一个屏幕宽度=设备宽度的说明

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

      ② 在css样式里面

        @media screen and (max-width : 800px){

          body{

            background : red;

          }

        }

      上面表示小于多少像素的时候进行处理

      一种是小于多少像素而且大于多少像素执行处理

      @media screen (max-width : 800px) and {min-width: 700px} {

          body{

            background : red;

          }

      }

      就是通过@media获取屏幕像素,指定小于或大于多少像素的时候处理一些效果或者是布局

  这样就可以在不同的设备上通过获取不同设备的屏幕宽度来做相应的处理,达到多个设备不同的显示

  效果,达到更加好的用户体验。

     还有在做响应式的时候,在最外层的div加一个

        width:50%;  min-width: 700px;

     在屏幕达到缩放的条件是后,会一下子缩放,个人感觉挺好,呵呵

      

      好了作为前端的新人,希望各位前辈多多关照了,本文档属于个人见解,不洗勿喷!!!

时间: 2024-10-01 23:59:50

浅谈,bootstrap,响应式网站的相关文章

浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的Obj

浅谈html5 响应式布局

一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过. 随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点?   优点: 面对不同分辨率设备灵活性强

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading"> <div class="col-md-12"> <h2>更多信息</h2> <p class="lead"> 广州恒大淘宝队的官方网站和微博同时发布了几张海报,预热本周三晚8点即将到来的亚冠1/4决赛第二回

7 个 Bootstrap 在线编辑器用于快速开发响应式网站

Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? 这就是Bootstrap 编辑器的用武之地. Bootstrap 编辑器和生成器使得画界面原型.测试.搭建响应式网站变得简单. 尽管每一个编辑器都不同,但是它们都利用Bootstrap 庞大的组件库实现了拖入和移除组件功能. 在这篇文章中,我们总结了一些目前市场上最好的 Bootstrap 编辑器

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCallout"> <div class="col-md-12"> <div class="well"> <div class="page-header"> <h1>梅西升腾小宇宙<s

使用Bootstrap 3开发响应式网站实践02,轮播

本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Indicators--> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel&qu

使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3>马云为恒大生死战开出男人奖 </h3> <p> 8月27日晚,广州恒大将迎来亚冠联赛生死战,主场迎战西悉尼流浪者队,由于一周之前已经在客场0-1负于对手,本场比赛恒大队必须置死地而后生在主场净胜对手两球.就在今天中午,前不久入主恒大的阿里巴巴老板马云来到球队,在鼓励球员的同时开

使用Bootstrap 3开发响应式网站实践07,页脚

页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="row"> <div class="col-sm-2"> <h6>Copyright ©新浪体育</h6> </div> <div class="col-sm-4"> <h6>关于我们

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class="col-sm-6"> <h3>兰帕德宣布退出英格兰队</h3> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="a