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

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

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

二、碰到的问题

刚开始以为自己已经把网站上的例子都执行了一遍(近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. ThinkPHP项目 公共方法存放位置

    ThinkPHP项目公共方法写在   根目录-> app-> common 里面 ThinkPHP模板公共方法卸载   根目录->app->模块名称->common  里 ...

  2. 【Thinking in Java, 4e】初始化与清理

    [用构造器确保初始化] [方法重载] 涉及基本类型的重载 1.如果传入的数据类型小于方法中声明的形式参数类型:实际数据类型会被提升. 2.如果传入的数据类型大于方法中声明的形式参数类型:编译器报错,应 ...

  3. GATK的硬过滤

    https://software.broadinstitute.org/gatk/documentation/article.php?id=2806

  4. cordova linux 安装并编出第一个demo-android

    cordova可以做到一次编写到处运行各个平台(android.ios.wp.bb.firefoxos.web等几乎所有平台) 手上只有一个android手机 ,安装的时候没有那么顺利,第一大问题就是 ...

  5. ubuntu18.04 64bit如何安装docker

    注:参考自https://docs.docker.com/install/linux/docker-ce/ubuntu/ 1.卸载旧版本docker(如果之前安装了) sudo apt-get rem ...

  6. 手动装配Bean

    代码: import org.springframework.context.ApplicationContext; import org.springframework.context.suppor ...

  7. js去除前后空格

    <script language="javascript"> String.prototype.trim=function(){     return this.rep ...

  8. ssm中不能访问静态资源问题

    最近用springmvc spring mybatis框架写程序,请求成功并获得数据,唯独css样式不能加载,但路径正确,css文件编码也是utf-8,用火狐debug总是显示未请求到(都快怀疑自己写 ...

  9. 解题报告:hdu1003 Max Sum - 最大连续区间和 - 计算开头和结尾

    2017-09-06 21:32:22 writer:pprp 可以作为一个模板 /* @theme: hdu1003 Max Sum @writer:pprp @end:21:26 @declare ...

  10. outline详解

    outline这个属性平时用的不太多,最近被问及专门研究一下这个属性的作用. CSS2加进来的outline属性,中文翻译过来是外轮廓. 神马是轮廓? 轮廓,指边缘:物体的外周或图形的外框. 那这样的 ...