个人介绍html代码bootstrap.doc

个人介绍html代码bootstrap 篇一：个人学习总结-BootStrap入门教程 注明：该文档由本人整理于2013年12月8日 Bootstrap中文参考网站： BootStrap必威体育精装版版源码下载： 官网下载的Bootrsap源码包含下列文件： 构建bootstrap基础网页(可以作为网页的基础模板，以后直接复制过去，然后就可以使用bootstrap定义好的相关标签等等) 如图1-1所示： 图1-1 说明： 1）lt;meta name=quot;viewportquot; content=quot;width=device-width,initial-scale=1.0quot;gt; 使用来修复网页在移动设备上显示的问题 2）lt;!--[if lt IE 9]gt; lt;script src=quot;/svn/trunk/html5.jsquot;gt;lt;/scriptgt; lt;![endif]--gt; 这是对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-2 lt;div class=”span1”gt;lt;/divgt;就是一个占据一栏的块， lt;div class=”row”gt;lt;/divgt;表示一行，在其中可以嵌套几个并列的div块， 其中每一块的偏移可以通过offset1~12类实现，如下图1-3所示: 图1-3 其中第一行第二块的代码就是lt;div class=”span4 offset4”gt;lt;/divgt; 基于Bootstrap网页中的几个典型的功能： 1） 导航栏-navbar lt;div class=quot;navbarquot;gt; lt;div class=quot;navbar-i(来自:WwW.CssY 书业 网:个人介绍html代码bootstrap)nnerquot;gt; lt;a class=quot;brandquot; href=quot;#quot;gt;CCIT Online Learninglt;/agt; lt;ul class=quot;navquot;gt; lt;li class=quot;activequot;gt;lt;a href=quot;#quot;gt;首页lt;/agt;lt;/ligt; lt;ligt;lt;a href=quot;#quot;gt;关于我们lt;/agt;lt;/ligt; lt;ligt;lt;a href=quot;#quot;gt;问题反馈lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; 说明：其中navbar类表示一个导航栏，navbar-inner类下面是导航栏内的东西，导航栏里面一般是一个无序的列表，通过ul标签和li标签可以组成一个无序的列表（ul是无序列表，ol是有序列表，dl是描述列表，后期会详细介绍，此处只做一个简单的说明），在无序列表中可以通过在li下引用active类来激活对应的选项， 2） 文字和段落 在bootstrap中对于段落中的文字有相应的设计好的样式，通过调用其中设计好的样式就可以排版出好看的文字段落， lt;pgt;lt;/Pgt;标签中包含一段文字， lt;h* class=”pageheader”gt;lt;/h*gt;标签包括标题文件，bootstrap中会自动的把标题放大并且加上下划线， lt;blockquotegt;lt;/blockquotegt;标签表示其中的段落为引用段落，bootstrap 会为其加入设计 好的样式，如下图1-4所示： 图1-4 对于段落中的文字处理还有好多的标签，例如：