展开1全部
方法/步骤
何为Bootstrap?简洁的、直观的、超牛的、以移动设备优先的前端开发框架,让web开发更迅速、简单。他是Twitter推出的html/css的前端框架,现在的网页设计越来越多的平面化,所以,也就出现了一些平台来做平面化的样式来供我们来使用.因为这款框架是一个开源的框架,所以现在很多人都在使用该框架.下载下来的框架目录结构如图:
么去使用一个开源的框架或者一段现成的源码?首先你确定要保证你所需要的引用你都有,还有你要保证运行的最小点.就是需要3个外部文件,A,
B,C,你就要找到这3个文件,如果是你找到的一段代码,你要确保他能够运行,如果都没有办法运行,放弃吧.另找下一个.一般情况下,
一个框架都会给你一个最基本的例子,这个例子中使用了框架需要的外部文件和一些简单的说明,bootstrap也给出了一个简单的例子.
如图就是最基本的一个例子.该例子说了一个很重要的,也是很好的一个文件引用的方式,就是css.全部放在上面,然后把js.
都放在页面的最下面,这样能够更好的加载页面渲染.建议你使用最基本的页面去修改你需要的页面,而且要做到按照自己的需求来写代码.不要复制,
Bootstrap中内置了一套响应式的,移动优先的流式栅格系统,随着不同的设备,不同的平台.或者窗口大小(viewport),根据他们的不同系统会自动的分成12份.也就是说,栅格系统是通过一系列的行和列来组成我们需要的页面,然后把你需要的内容放在这些的布局中.在使用栅格系统的时候,需要注意的是:需要在使用.row(行的意思)的外层使用.container为的是,在赋值时给出合适的排列(aligment)和内补(padding).
个例子:一行其中包含3个内容分别占屏幕的25%,50%,25%.我们要在超小屏幕设备-手机上使用.那么就要写成12的3,6,
3.具体代码看图片,这里的效果图,为了效果加上了一个well的class.只是为了演示效果,能够看清除.
为了有一个很好
的学习东西,让你看一下表格的创建.就是这么的简单,只需要在table上,
填写一个class为.table的样式即可生成一个很好很实用的表格.其实,这些都是别人提前建立好的页面显示效果,
就是不用自己再去写一些简单的css效果.多练.多使用它就属于你.
在给出一个只有简单的带有导航栏的页面.该页面,理解透了,这个东西你就算学会了,剩下的就是用什么查一下文档就拿来用了,
网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。催办泊土暴涨采临