一、概述也好,过程也好,反正就是这样

知道这个还是从群里听到的,一个人的视野是有限,必须借助他人来扩展。好奇使我去搜索了解了一下。原来是一个网页前端框架,可以适合不同大小屏幕,自动适应正常显示。这就是它的奇。了解了还知道了它另一个名称——响应式设计!新知识,新技术!后面再博客园上多多少少看过一些关于它的文章,但是没有看进去,只知道它做出来的东西很好看,仅此而已。后来一段时间,由于没有做其他任务,于是想学习它了,找了一个网站,把上面的例子都一一拔下来,然后执行了一遍。算是自己学过了,也是仅仅学过。学会没有就不得而知了,因为没有实实在在的项目用到它,不知道。这样过了好一段时间了,没有再去学习了解它了。

不知道是自己是有预知性,还是巧合,真的要我用这东西做一个网页的了。当接到这个任务时,心理还有点小高兴,我学过,学过的东西终于用的上了。开始着手做了,做了一个又一个,不满意,还是不满意,只有改,调整。继续那网站学习。终于成了,也知道怎么使用它了。但是一个星期已经过去了。说值吗?应该值。至少会使用这个新技术了。

二、碰到的问题

刚开始以为自己已经把网站上的例子都执行了一遍(近100个),应该不成问题了。可惜我想错了,那是在非常非常理想的情况下,没有其他要求,而且效果都是别人设计好的,很顺利。现在呢?要自己弄一个效果,不是现成的。也只有慢慢摸索了。先是碰到居中问题,然后是改变浏览器大小显示问题,最后是兼容问题。这些不只是我碰到,网上一搜大把大把,有些提供了解决方法,我也是参考他们的提供的方案。有些还是要自己想了,特别是碰到一个位置问题,刚开始一直想到是用div,结果反复测试发现有问题,最后应该是巧合,或许是该要想到了,已经那么多次调整了,看到了一个表格,是呀,为啥不用表格来布局。立即着手改,还真的真的成了!

三、总结

不能急,做啥事都是,急了,就不能静,不能静,就啥都不会想了。问题要一个个来解决,不能左想想,右看看,每个都去考虑,结果乱成麻。Bootstrap用都是用div来控制布局,有时候自带的样式不能解决,只有自己写样式来弥补,好像定义一个class,引用它,不起作用,要直接写。它是网格布局,可以一次调用很多不同大小屏幕的样式,而且只要设置数值就可以了,很方便。其他,也学会了如何实现网页不同语言之间的切换方法了,不是一种,是两种。

初次使用Bootstrap的更多相关文章

  1. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  2. 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  3. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  4. jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...

  5. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  6. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  7. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  8. validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...

  9. Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 1

    Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 -- 新建微软实 ...

随机推荐

  1. PL/SQL编程—存储过程

    SQL> create or replace procedure sp_pro3(name_in varchar2,id_in varchar2) is begin update mytest ...

  2. spark关于join后有重复列的问题(org.apache.spark.sql.AnalysisException: Reference '*' is ambiguous)

    问题 datafrme提供了强大的JOIN操作,但是在操作的时候,经常发现会碰到重复列的问题.在你不注意的时候,去用相关列做其他操作的时候,就会出现问题! 假如这两个字段同时存在,那么就会报错,如下: ...

  3. java并发之Lock以及和synchronized区别

    从Java5之后,在Java.util.concurrent.locks包下提供了另外一种方式来实现同步访问,那就是Lock. 1.Lock 首先要说明的就是Lock,通过查看Lock的源码可知,Lo ...

  4. USB Transfer and Packet Sizes

    https://msdn.microsoft.com/en-us/library/ff538112.aspx http://blog.csdn.net/chenyujing1234/article/d ...

  5. hadoop HA + kerberos HA集群搭建问题和测试总结

    1.  常见问题 (1)hostname设置问题.vi /etc/sysconfig/network (2)集群/etc/hosts没有统一. (3)yarn slave需要单独启动../sbin/y ...

  6. 照着官网来安装openstack pike之创建并启动instance

    有了之前组件(keystone.glance.nova.neutron)的安装后,那么就可以在命令行创建并启动instance了 照着官网来安装openstack pike之environment设置 ...

  7. 20145216史婧瑶《Java 程序设计》第4周学习总结

    20145216 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 继承基本上就是避免多个类间重复定义共同行为. 在Java中,继承时使用exte ...

  8. localAddress

    $(function(){ <% out.println("/** ip:"+request.getLocalAddr()+"("+request.get ...

  9. svn checkout 提示“由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败。”解决方法

    安装好之后再windows上checkout项目,一直出错:“由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败”:在尝试了很多次之后找到了最后的问题所在.  在网上找的方法试过了, ...

  10. Servlet3.0与Spring

    servlet   filter  listener  web.xml DispatcherServlet  web.xml 后期 servlet3.0我们去除web.xml 通过注解方式 同时需要s ...