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

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

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

二、碰到的问题

刚开始以为自己已经把网站上的例子都执行了一遍(近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. web安全学习方向~两图胜千言~~

  2. JSON 转 对象

    Json对象与Json字符串的转化.JSON字符串与Java对象的转换   一.Json对象与Json字符串的转化 1.jQuery插件支持的转换方式: $.parseJSON( jsonstr ); ...

  3. [转]HTML标签元素的分类

      在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...

  4. CSS Link(链接)

    CSS Link(链接) 不同的链接可以有不同的样式. 一.链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式,这取决于他们是什么状态. 这四个链接状态 ...

  5. 20145240《网络对抗》Web安全基础实践

    Web安全基础实践 实验后回答问题 (1)SQL注入攻击原理,如何防御 原理:SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语 ...

  6. git分支合并脚本

    为什么要写这个脚本 工作中经常会有合并分支的操作,一开始也不以为然,后来发现如果更新频繁的话,根本就停不下来,昨天上午正好有空,就完成了下面的这个初版 可能存在的问题 一般的应用场景都是:从maste ...

  7. oracle查看被锁的表以及解锁表

    在oracle 上面查看别锁定的表,以及解锁表的sql: select t3.object_name,t3.owner,t2.machine,t2.sid,t2.serial# from v$lock ...

  8. AccessToken-->Password Grant

    https://www.oauth.com/oauth2-servers/access-tokens/password-grant/ The Password grant is used when t ...

  9. Leetcode——Third Maximum Number

    Question Given a non-empty array of integers, return the third maximum number in this array. If it d ...

  10. easyui combobox 拼音检索快捷选择输入

    easyui combobox 拼音检索快捷选择输入 效果如图   $.ajax({ url: UserActionUrl + '?action=listuserworktype', dataType ...