个人学习总结-BootStrap入门教程【模板范本】.docx

《个人学习总结-BootStrap入门教程【模板范本】.docx》由会员分享，可在线阅读，更多相关《个人学习总结-BootStrap入门教程【模板范本】.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、注明：该文档由本人整理于2013年12月8日Bootstrap中文参考网站:http:/www。bootcss。com/BootStrap最新版源码下载：http:/v3。bootcss。com/官网下载的Bootrsap源码包含下列文件：构建bootstrap基础网页(可以作为网页的基础模板，以后直接复制过去,然后就可以使用bootstrap定义好的相关标签等等） 如图11所示：图11说明:1）meta name=”viewport content=width=devicewidth,initialscale=1.0使用来修复网页在移动设备上显示的问题2)！-if lt IE 9script

2、 src=！endif-这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理4）在head中的bootstrapresponsive.css是非必须文件,可以不引入，这个文件的主要作用是做一个响应式的网页。5）在网页中bootstrap.css是bootstrap中的样式文件，bootstrap.js是脚本文件，两个文件相互对应,引入的顺序和位置一般是：CSS文件在head标签中引入，js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。6)Bootstrap是基于HTML5网页的，所以首先要建立一个HTML5类型的网页做完以上的操作就建好了一个基本

3、的bootstrap网页了,然后就可以在body里面使用bootstrap中定义好的各种好看的样式。简要说明在Bootstrap中，网页按照十二栏的布局分布,在div中通过span类可以定义该div块占据多少栏，span1span12可以选择.如下图1-2所示：图1-2div class=span1”就是一个占据一栏的块，div class=”row”/div表示一行，在其中可以嵌套几个并列的div块，其中每一块的偏移可以通过offset112类实现,如下图13所示：图13其中第一行第二块的代码就是div class=span4 offset4”基于Bootstrap网页中的几个典型的功能：1

4、） 导航栏-navbardiv class=”navbar div class=”navbar-inner” CCIT Online Learning/a li/li a href=问题反馈/li /ul /P标签中包含一段文字，标签包括标题文件，bootstrap中会自动的把标题放大并且加上下划线，标签表示其中的段落为引用段落，bootstrap会为其加入设计好的样式，如下图1-4所示：图14对于段落中的文字处理还有好多的标签，例如：/abbr标签的作用是缩写strong/strong标签作用是将其中的文字加粗显示，em/em标签作用是将其中的文字显示为斜体small/small标签的作用是

5、将其中的文字缩小显示， p abbr class=initialism title=”Oh MY GOD”omg hjdfh hdjflhadfhdhfiahdfjadff hj fahf dfahdf fh fa djdf anfb faf /psmallfrom citeadmin/cite/small/blockquote显示的效果如下图15所示:3） 代码的处理在段落中可以使用code标签显示单个的代码，p lt;h1>/codefhaldsjfhjaldfhaldfhladjsfhlajdhfljkasdhf lt;div class="；span4"；>

6、 lt;h2 class=quot；page-headerquot；gt;区块二lt；/h2> lt;pgt； asdfj ljasdhf ljasdhf ljadfhljhsdf ljsdhf hdfaioh adfh adfhl hhbr <；/pgt; </divgt;/pre使用per标签的好处就是复制进入的东西可以保持原来的样子,包括段落等。4） 列表h2无序 liadf/li liadsf/li liasdf/li h2有序/h2adf/li liadf liadsf liasdf/li h2描述列表/h2 dl class=dlhorizontal adf/dt

7、dddasfdafadsf/dd dtadf/dt ddadfadsf adsf/dt asdf/dt adfadfadsf/dl5） 表格h2默认表格/h2table class=”table th编号姓名/th th性别/th th学校tbody tr 1 男 td软软件113 在table中加入tablestriped类就是条纹表格：在table中加入table-bordered类是带边框的表格：还有一种是压缩表格,加入table-condensed类就是在原有基础上整体便小了:6） 前后缀h1 class=”pageheader文本框的前缀和后缀/h1div class=inputprepend inputappend¥/spanspan class=”addon。00/span/span标签将其中的符号与输入框无缝链接-精品word文档 值得下载 值得拥有-