搜档网
搜档网
当前位置：搜档网 › BootStrap入门教程

BootStrap入门教程

BootStrap入门教程
BootStrap入门教程

本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。

BootStrap入门教程(一)

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如下图所示：

https://https://www.sodocs.net/doc/67246816.html,/

http://www.fleetio.co m/

GitHub上这样介绍bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding.

Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.

全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:

...

2同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。

3格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。默认格网系统直观概念如图1-1所示：

图1-1 默认格网系统(Default G rid System)

以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div.

...

...

2.2偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：

图1-２偏移列(Offset co lumns)

以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.

...

...

2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row 和相应的长度的span* div即可。如图1-3所示：

图1-3 嵌套列(Nesting columns)

以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.

Level 1 of column

Level 2

Level 2

嵌套的div长度之和不能大于它的父div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。

流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将. row 改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：

图1-4 流式格网系统(Fluid grid system)

以下代码实现了是实现图1-4中，两个不同长度的流式页面

要素.

...
...

嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。

自定义格网(Grid cu stomization).Bootstra p 允许通过修改variab les.less 的参数值来自定义格网系统。主要包括如表1-1所示的

变量： 变量 默认值 说明

@gridColumns 12 列数 @gridColumnWidth 60px 每列的宽度 @gridGutterWidth

20px

列间距

表1-1 格网变量 我们通过修改以上值，并重新编译B ootstrap 来实现自定义格网系统。如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less 来获得多设备兼容.

布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap 提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为Fixed 布局，右边为Fluid 布局：

图1-5 布局(Layout) 固定布局代码如下：

...

流式布局代码如下：

如果对Bootstrap提供的布局不够满意，可以参见L ess Frame Work 提供的模板。

最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。https://www.sodocs.net/doc/67246816.html,/bootstrap/inde x.html

参考文献与延伸阅读：

1.Bootstrap的来由和发展。https://www.sodocs.net/doc/67246816.html,/articles/building-twitter-bootstrap/

2.Less与Sass的介绍与对比.https://www.sodocs.net/doc/67246816.html,/2011/09/09/an-introduction-to-less-and-compariso n-to-sass/

3.Html5模板https://www.sodocs.net/doc/67246816.html,/

4.Html5与Bootstrap混合项目(H5BP)https://https://www.sodocs.net/doc/67246816.html,/1422879

5.20个有用的Bootstrap资源https://www.sodocs.net/doc/67246816.html,/20-beautiful-resources-that-complement-twitter-bo otstrap/

6.Bootstrap按钮生成器https://www.sodocs.net/doc/67246816.html,/bootstrap_buttons/

7.前后端结合讨论https://www.sodocs.net/doc/67246816.html,/questions/9525170/backend-technology-for-front-end-technologies-lik e-twitter-bootstrap

8. Bootstrap英文教程https://www.sodocs.net/doc/67246816.html,/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-t witter/

BootStrap入门教程(二)

上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。

基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容。

排版(Typography)，它囊括标题(Headings),段落(paragraphs), 列表(lists)以及其他内联要素。我们可以通过修改variables.less的两个变量:@baseFontSize 和@baseLineHeight来控制整体排版的样式。Bootstrap 同时还用了一些其他的算术方法来创建所有类型要素的margin,padding,line-height等。

1.1 标题和段落使用常见的html和

即可表现,可以不必考虑margin,padding。两者显示效果如图2-1所示：

图2-1 标题与段落(Headings¶graphs)

1.2 强调(Emphasis).使用和两个标签，前者使用粗体，后者使用斜体来强调标签内容。请注意标签在html4中定义语气更重的强调文本；在HTML 5 中， 定义重要的文本。这些短语标签也可以通过定义CSS的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations ).使用，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入title属性来显示原文，使用.initialism类对缩写以大写方式显示。

1.3 引用文字(Blockquotes).使用

标签和两个标签，前者
是引用的文字内容，后者是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示

图2-2 引用(Blockquotes)

代码片段如下所示：

凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军团总司令.蒙奇.D.路飞

凌冬将至.

我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。

守夜人军

团总司令.蒙奇.D.路飞

1.4列表(lists).Bootstrap提供三种标签来表现不同类型的列表。

    表示无序列表，
      表示无样式的无序列表，
        表示有序列表，
        表示描述列表，
        表示竖排描述列表。图2-3较好显示了这几种列表：

        图2-3 列表(lists)

        2.表格(Table).依然使用

        等标签来表现表格。主要提供了四个css的类来控制表格的边和结构。表2-1显示了bootstrap的table可选项。

        名字Class描述

        Default None 没有样式，只有行和列

        Basic .table 只有在行间有竖线

        Bordered .table-bordered 圆角和添加外边框

        Zebra-stripe .table-striped 为奇数行添加淡灰色的背景色

        Condensed .table-condensed 将横向的padding 对切

        表2-1 表格选项(Table Options)

        我们可以将这些CSS类结合起来使用，如图2-4所示，显示一个混合的表格：

        图2-4 表格(Table)

        代码片段如下所示：

        View Code

        Some value here

        This is a disabled checkbox

        Something may have gone wrong

        Please correct the error

        Woohoo!

        Woohoo!

        3. 表单(Forms).Bootstrap的表单是非常惊艳的部分。最好的地方在于你如何使用这些hmtl标签，它都会有很好的表现效果，而且不需要其他多余的代码。无论多复杂的布局都可以根据这些简洁，可扩展，事件绑定的要素来轻易实现。主要提供了四四种表单选项，如表2-2所示：

        名字Class描述

        Vertical (default).form-vertical (not required) 堆放式, 可控制的左对齐标签

        Inline.form-inline 左对齐标签和简约的内联控制块

        Search.form-search 放大的圆角，具有美感的搜索框

        Horizontal.form-horizontal 左漂浮, 右对齐标签

        推荐到官方文档去体验下各种表单要素的真实效果，在chrome,Firefox等现代浏览器下显示十分优雅。同时可以使用.control-group来控制表单输入、错误等状态，需要wekit内核。如图2-5所示：

        图2-5 表单状态控制

        代码片段如下：

        View Code

        Some value here

        This is a disabled checkbox

        Something may have gone wrong

        Please correct the error

        Woohoo!

        Woohoo!

        4.按钮(Buttons).Bootstrap提供多种样式的按钮，同样是通过CSS的类来控制,包括btn, btn-primary,

        btn-info,btn-success等不同颜色的按钮，亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小，能够同时用在,

         标签https://www.sodocs.net/doc/67246816.html,/html5/tag_caption.asp

        3. StyleBootstrap https://www.sodocs.net/doc/67246816.html,/

        4. 基于wordpress的Bootstrap http://bootstrapwp.rachelbaker.me/

        5.Why did Twitter release Bootstrap? https://www.sodocs.net/doc/67246816.html,/Why-did-Twitter-release-Bootstrap

        BootStrap入门教程(三)

        上讲回顾：Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求。

        Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels)，徽章(Badges)，排版(Typography)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)，杂项(Miscellaneous)。本讲将深入讲解这些内容。

        1. 按钮(Button)

        上讲最后提及到button的多种简单样式，然而在bootstrap中可以通过组合button，从而获得更多类似于工具条的功能，组件中的按钮可以组合成按钮组(button group)和按钮式下拉菜单(button drown menu).

        (下一讲的Javascript Plugin会提及到更多的按钮的应用).

        1.1 按钮组(button group)

        按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的或者

        按钮工具条

        按钮下拉菜单

        同时bootstrap还有分隔符的下拉菜单和上拉菜单按钮，可以参考文档。

        2.导航(Navigation)

        2.1 轻量导航(Nav,tabs,and pills)

        bootstrap的导航非常多样和灵活，允许使用同样的标签，不同的CSS类，带来不同风格的导航条，具有非常高的可定制性。所有的导航组件，包括tabs,pills,lists标签，都必须使用.nav的类实现基础的导航标签。除了我们常见的导航，还可以利用.nav-stacked类来实现堆叠式(stacked)--竖式的导航条。

        如图3-3所示，展示了多种基础风格的导航。

        图3-3 多种基础风格导航

        代码片段如下：

        View Code

        基础tabs

        基础pills

        竖排tabs

        竖排pills

        下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素，Nav list 类似于OSX的Finder，可以带有图标。它们同样可以用.nav 作为基础类，来实现这些组件。同时还有各种tab风格的导航条，在下讲再

        Bootstrap教程第一课：简单的Bootstrap主页

        Bootstrap教程第一课：简单的Bootstrap主页（1） 写在前面： Bootstrap是目前最流行的前端框架，我从简单的实例开始，写一份文字版的Bootstrap教程，希望能对大家有所帮助。 准备工作： 1、下载Bootstrap框架核心文件。 2、下载jQuery文件。 3、下载HTML5兼容IE的JS插件。 （各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址，也可以直接点击下面的下载链接下载，我已经将jQuery文件放在了js目录里了。）点击下载Bootstrap核心文件 HTML结构： 1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置： ...... 2、添加HTML文档meta标记，需要两条标记： 3、引入所需要的核心文件，包括Bootstrap的CSS文件，jQuery插件，Bootstrap的JS核心文件，以及HTML5.JS文件。

        那么现在，你的HTML文档，应该是这个样子的： Bootstrap 第一课：简单的Bootstrap主页 正式开始： 现在就可以在body之间写上你的网页结构代码了，添加上Bootstrap相应的CSS 类样式，就可以完成一个最简单的Bootstrap主页了。 首先，写好HTML结构代码：

        这是一个简单的Bootstrap主页

        这是一个简单的Bootstrap主页，制作这个主页，可 以分为三个步骤：

        基于Bootstrap的网页开发

        J I A N G S U U N I V E R S I T Y 本科毕业论文 基于bootstrap的网页设计 Bootstrap-based web design 学院名称：计算机科学与通信工程学院 专业班级：软件（嵌入式）1102班 学生姓名：缪江超 指导教师姓名：马汉达 指导教师职称：高级工程师 2015年6月

        基于bootstrap的网页设计 计算机科学与通信工程学院软件工程（嵌入式）缪江超 摘要：：当今社会，网络是人们生活中不可或缺的一部分，网页则是传递信息的重要媒介。随着时代的进步，网页设计也随着网络技术的发展而不断发展。计算机学院实验中心信息管理系统，是2004年开发的，因设计开发时间较早，其界面已不适应当前的技术发展，不能满足师生对于网站美观要求。 Bootstrap是当下最受人们欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活的特性使得 Web 开发更加快捷，Bootstrap提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。本文针对实验中心网站得主要问题，介绍了网页设计的相关理论，使用Bootstrap框架，对实验中心网站进行了重新布局设计，使得网站界面更为美观，用户体验更好。 关键字：前端开发 Bootstrap 布局架构实验室网站

        Bootstrap-based web design Miao Jiangchao, Computer Science and Communication Engineering, Software Engineering (embedded) Professional Abstract: Nowadays, networks are an indispensable part of people's lives, the page is an important medium to transmit information. With the progress of the times,with the development of network technology,web design continue to develop. School of Computer Science Experiment Center Information Management System, developed in 2004, due to the design and development time earlier, the interface has not adapted to current technological developments, and can not meet the aesthetic requirements for teachers or students. Now Bootstrap is the most popular front frame,which is based on HTML, CSS, JAVASCRIPT, which is a clean and flexible features that make Web development faster. Bootstrap offers elegantly HTML and CSS specification, which is written by the dynamic CSS language Less. In this paper, the main problem is the Experimental Center site, introduces the theory of web design, use Bootstrap framework, the experimental center site re-layout design, making the site more attractive interface, better user experience. Key Words：Front-end development Bootstrap Layout Architecture Laboratory site

        《经济学基础》各讲习题及参考答案(简)

        《西方经济学》习题及参考答案 《经济学基础》第一讲绪论习题及参考答案 一、单选题 1、资源的稀缺性是指（）。 A、资源的绝对有限性； B、资源的充足性； C、资源的稀少性； D、资源的相对有限性； 2、追求效用最大化的主体是（）。 A、居民户； B、厂商； C、劳动者； D、政府； 3、微观经济学的中心理论是（）。 A、均衡价格理论； B、消费者行为理论； C、生产者行为理论； D、分配理论； 4、宏观经济学的中心理论是（）。 A、国民收入决定理论； B、失业与通货膨胀理论； C、经济周期与经济增长理论； D、宏观经济政策； 5、解决“应该是什么”问题的经济学是（）。 A、理论经济学； B、应用经济学； C、实证经济学； D、规范经济学； 6、解决“是什么”问题的经济学是（）。 A、理论经济学； B、应用经济学； C、实证经济学； D、规范经济学； 7、以个别居民与厂商为研究对象的经济学理论是（）。 A、微观经济学； B、宏观经济学； C、实证经济学； D、规范经济学； 8、以整个国民经济为研究对象的经济学理论是（）。 A、微观经济学； B、宏观经济学； C、实证经济学； D、规范经济学； 9、（）奠定了经济学作为一个独立学科的基础。 A、亚当·斯密； B、马歇尔； C、凯恩斯； D、萨缪尔森； 10、（）为首的经济济学家把个量分析为主的微观经济学和以总量分析为主的宏观经济学拼和在一起形成了主流经济学派。 A、亚当·斯密； B、马歇尔； C、凯恩斯； D、萨缪尔森； 二、判断题 1、自由取用物品是零点价格时供给小于需求的物品。（） 2、经济物品是零点价格时供给小于需求的物品。（） 3、微观经济学是宏观经济学的基础。（）

        黑马程序员UI教程：Bootstrap弹出框

        黑马程序员UI教程：Bootstrap弹出框 使用过JQuery UI的园友们应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap里面也内置了弹出框组件。打开bootstrap 文档https://www.sodocs.net/doc/67246816.html,/components/可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是说，只要我们引入了bootstrap的文件，就可以直接使用它的dialog组件，是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说，直接看来它如何使用吧。 1、c shtml界面代码