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

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

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

二、碰到的问题

刚开始以为自己已经把网站上的例子都执行了一遍(近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. Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3) A Is it rated?

    地址:http://codeforces.com/contest/807/problem/C 题目: C. Success Rate time limit per test 2 seconds mem ...

  2. web安全学习方向~两图胜千言~~

  3. 关于jQuery获得表单radio类型输入框的选中值

    var item=$("input[name='w1']checked").val(); 下面这句,问题解决(加上[type='radio']:): var item=$(&quo ...

  4. LinQ高级查询、组合查询、IQueryable集合类型

    LinQ高级查询: 1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头 ...

  5. 使用selenium前学习HTML(3)— 属性

    <!-- HTML标签可以拥有属性,属性提供元素的更多的信息: 属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的开始标签中规定. ...

  6. 漂亮的输出-----prettytable和colorama的使用

    Python通过prettytable模块将输出内容如表格方式整齐输出,python本身并不内置,需要独立安装该第三方库. 1 pip install PrettyTable 1 #源码安装 2 wg ...

  7. spring手动配置

    本文总结自:https://www.cnblogs.com/V1haoge/p/7183408.html SpringBoot中免除了大部分配置,但是对于一些特定的情况,还是需要我们进行手动配置的. ...

  8. 20145302张薇《Java程序设计》实验四报告

    20145325张薇 实验四:Andoid开发基础 实验内容 使用 Android Studio 设计"Hello" 设计过程 首先创建项目 选择.xml中的`Design 选中W ...

  9. 爬虫框架Scrapy之案例二

    新浪网分类资讯爬虫 爬取新浪网导航页所有下所有大类.小类.小类里的子链接,以及子链接页面的新闻内容. 效果演示图: items.py import scrapy import sys reload(s ...

  10. 【eclipse】Multiple annotations found at this line:——解决方法

    问题截图: 就是eclipse的maven插件太旧了 用新插件新建的maven项目就没有报错 用软件对比了一下这两个pom文件 只有项目名有区别 所以就是插件的问题 一个简单安装离线maven插件的方 ...