初次使用Bootstrap
一、概述也好,过程也好,反正就是这样
知道这个还是从群里听到的,一个人的视野是有限,必须借助他人来扩展。好奇使我去搜索了解了一下。原来是一个网页前端框架,可以适合不同大小屏幕,自动适应正常显示。这就是它的奇。了解了还知道了它另一个名称——响应式设计!新知识,新技术!后面再博客园上多多少少看过一些关于它的文章,但是没有看进去,只知道它做出来的东西很好看,仅此而已。后来一段时间,由于没有做其他任务,于是想学习它了,找了一个网站,把上面的例子都一一拔下来,然后执行了一遍。算是自己学过了,也是仅仅学过。学会没有就不得而知了,因为没有实实在在的项目用到它,不知道。这样过了好一段时间了,没有再去学习了解它了。
不知道是自己是有预知性,还是巧合,真的要我用这东西做一个网页的了。当接到这个任务时,心理还有点小高兴,我学过,学过的东西终于用的上了。开始着手做了,做了一个又一个,不满意,还是不满意,只有改,调整。继续那网站学习。终于成了,也知道怎么使用它了。但是一个星期已经过去了。说值吗?应该值。至少会使用这个新技术了。
二、碰到的问题
刚开始以为自己已经把网站上的例子都执行了一遍(近100个),应该不成问题了。可惜我想错了,那是在非常非常理想的情况下,没有其他要求,而且效果都是别人设计好的,很顺利。现在呢?要自己弄一个效果,不是现成的。也只有慢慢摸索了。先是碰到居中问题,然后是改变浏览器大小显示问题,最后是兼容问题。这些不只是我碰到,网上一搜大把大把,有些提供了解决方法,我也是参考他们的提供的方案。有些还是要自己想了,特别是碰到一个位置问题,刚开始一直想到是用div,结果反复测试发现有问题,最后应该是巧合,或许是该要想到了,已经那么多次调整了,看到了一个表格,是呀,为啥不用表格来布局。立即着手改,还真的真的成了!
三、总结
不能急,做啥事都是,急了,就不能静,不能静,就啥都不会想了。问题要一个个来解决,不能左想想,右看看,每个都去考虑,结果乱成麻。Bootstrap用都是用div来控制布局,有时候自带的样式不能解决,只有自己写样式来弥补,好像定义一个class,引用它,不起作用,要直接写。它是网格布局,可以一次调用很多不同大小屏幕的样式,而且只要设置数值就可以了,很方便。其他,也学会了如何实现网页不同语言之间的切换方法了,不是一种,是两种。
初次使用Bootstrap的更多相关文章
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏
初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...
- jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- bootstrap插件学习-bootstrap.carousel.js
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- validate[.unobtrusive]和Bootstrap实现tooltip错误提示
validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...
- Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 1
Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章 -- 新建微软实 ...
随机推荐
- 网页图片jpg,gif,png对比。
总结:照片类的jpg如:banner图,小图gif或png8 GIF格式特点: 透明性 Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明). 动画 G ...
- Mysql 5.7 主从复制
配置思路1. 修改master和slave的配置文件,使用二进制日志,指定serverid目的是让各自都有了自己的唯一标示,并以二进制文件格式进行交流2. master中创建授权用户,查看二进制日志文 ...
- 130. Surrounded Regions(周围区域问题 广度优先)(代码未完成!!)
Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'. A reg ...
- 使用selenium前学习HTML(3)— 属性
<!-- HTML标签可以拥有属性,属性提供元素的更多的信息: 属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的开始标签中规定. ...
- templates页面超链接访问Controller方法
<h3>部署列表:</h3> <table border="1px" cellspacing="0px" width=" ...
- Python3.x:代理ip刷点赞
Python3.x:代理ip刷点赞 声明:仅供为学习材料,不允许用作商业用途: 一,功能: 针对某网站对企业自动刷点赞: 网站:https://best.zhaopin.com/ 二,步骤: 1,获取 ...
- 手写一款符合Promise/A+规范的Promise
手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...
- awk循环语句-【AWK学习之旅】
AWK中两种循环语句:if-else 和 while 控制流语句: 1.if-else 求总数,平均值: [root@monitor awkdir]# awk '$3>6 {n = n ...
- linux第四周
一.知识点总结 (一)用户态.内核态和中断 1.内核态:在高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 2.用户态:在低级别的指令状态下,代码 只能在级别允许的特 ...
- XML常用标签的介绍
1.引言 在使用Java时经常遇到使用XML的情况,而因为对XML不太了解,经常配置时粘贴复制,现在对它进行总结,以备以后使用. 2.XML常见的定义 (1)XML(Extensible Markup ...