个人学习总结-bootstrap入门教程..docxVIP

注明：该文档由本人整理于2013年12月8日Bootstrap中文参考网站：/BootStrap最新版源码下载：/官网下载的Bootrsap源码包含下列文件：构建bootstrap基础网页(可以作为网页的基础模板，以后直接复制过去，然后就可以使用bootstrap定义好的相关标签等等)如图1-1所示：图1-1说明：1）meta name=viewport content=width=device-width,initial-scale=1.0使用来修复网页在移动设备上显示的问题2）!--[if lt IE 9]script src=/svn/trunk/html5.js/script![endif]--这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理4）在head中的bootstrap-responsive.css是非必须文件，可以不引入，这个文件的主要作用是做一个响应式的网页。5）在网页中bootstrap.css是bootstrap中的样式文件，bootstrap.js是脚本文件，两个文件相互对应，引入的顺序和位置一般是：CSS文件在head标签中引入，js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。6）Bootstrap是基于HTML5网页的，所以首先要建立一个HTML5类型的网页做完以上的操作就建好了一个基本的bootstrap网页了，然后就可以在body里面使用bootstrap中定义好的各种好看的样式。简要说明在Bootstrap中，网页按照十二栏的布局分布，在div中通过span类可以定义该div块占据多少栏，span1~span12可以选择。如下图1-2所示：图1-2div class=”span1”/div就是一个占据一栏的块，div class=”row”/div表示一行，在其中可以嵌套几个并列的div块，其中每一块的偏移可以通过offset1~12类实现，如下图1-3所示:图1-3其中第一行第二块的代码就是div class=”span4 offset4”/div基于Bootstrap网页中的几个典型的功能：导航栏-navbardiv class=navbar div class=navbar-inner a class=brand href=#CCIT Online Learning/a ul class=nav li class=activea href=#首页/a/li lia href=#关于我们/a/li lia href=#问题反馈/a/li /ul /div/div说明：其中navbar类表示一个导航栏，navbar-inner类下面是导航栏内的东西，导航栏里面一般是一个无序的列表，通过ul标签和li标签可以组成一个无序的列表（ul是无序列表，ol是有序列表，dl是描述列表，后期会详细介绍，此处只做一个简单的说明），在无序列表中可以通过在li下引用active类来激活对应的选项，文字和段落在bootstrap中对于段落中的文字有相应的设计好的样式，通过调用其中设计好的样式就可以排版出好看的文字段落，p/P标签中包含一段文字，h* class=”pageheader”/h*标签包括标题文件，bootstrap中会自动的把标题放大并且加上下划线，blockquote/blockquote标签表示其中的段落为引用段落，bootstrap会为其加入设计好的样式，如下图1-4所示：图1-4对于段落中的文字处理还有好多的标签，例如：abbr/abbr标签的作用是缩写strong/strong标签作用是将其中的文字加粗显示，em/em标签作用是将其中的文字显示为斜体small/small标签的作用是将其中的文字缩小显示，cite/cite标签是用来在应用中使用的，如来自XXX如下面的代码：blockquote p abbr class=initialism title=Oh MY GODomg/abbr hjdfh hdjflhadfhdhfiahdfjadff hj fahf dfahdf fh fa djdf anfb faf /psmallfrom citeadmin/cite/small/blockquote显示的效果如下图1-5所示：代码的处理在段落中可以使用code标签显示单个的代码，p codelt;h1gt;/codefhaldsjfhjaldfhaldfhladjsfhlajdhfljkasdhf /p对于一大段的代码可以使用pre标签显示，pre class=prettyprint linenumslt;div class=quot;span4quot;gt;br