Bootstrap框架-第2章 排版样式
网页设计与制作项目教程(HTML+CSS+Bootstrap)项目二
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ 文档用来描述网页. ＨＴＭＬ 文档包含ＨＴＭＬ 标签和纯 文本. ＨＴＭＬ 文档也被称为网页. 完整的ＨＴＭＬ 文档至少包括< ｈｔｍｌ > 标签、< ｈｅａｄ > 标签、< ｔｉｔｌｅ > 标签和< ｂｏ ｄｙ >标签.
• ＨＴＭＬ４. ０ 同样也加入了很多特定浏览器的元素和属性. 但是同 时也开始“清理” 这个标准. 把一些元素和属性标记为过时. 建议不 再使用它们.
上一页 下一页 返回
任务一 初识 HTML
• ＨＴＭＬ５ 草案的前身名为Ｗｅｂ Ａｐｐｌｉｃａｔｉｏｎｓ １. ０. 于２００４ 年由ＷＨＡＴＷＧ 提出. 于２００７ 年被Ｗ３Ｃ 接 纳. 并成立了新的ＨＴＭＬ 工作团队. 在２００８ 年１ 月２２ 日. 第 一份正式草案发布.２０１２ 年１２ 月１７ 日. 万维网联盟(Ｗ３Ｃ) 正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５ 规范已经正式定 稿. Ｗ３Ｃ 的发言稿称:“ＨＴＭＬ５ 是开放的Ｗｅｂ 网络平台的奠 基石.” ２０１３ 年５月６ 日. ＨＴＭＬ５.１ 正式草案公布. 该规范 定义了第五次重大版本. 第一次要修订万维网的核心语言: 超文本标 记语言(ＨＴＭＬ). 在这个版本中. 新功能不断推出. 以帮助Ｗｅｂ 应 用程序的作者. 努力提高新元素互操作性. ２０１４ 年１０ 月２９ 日. 万维网联盟宣布. 经过几乎８年的艰辛努力. ＨＴＭＬ５ 标准规范最 终制定完成了. 并已公开发布.
上一页 下一页 返回
任务一 初识 HTML
• ５. ＨＴＭＬ 发展历史 • 超文本标记语言(第一版): １９９３ 年６ 月作为互联网工程工作小组
bootstrap基础教程案例代码
一、概述Bootstrap是一个用于快速开发响应式网页的前端框架，其具有易用性和功能丰富的特点，广泛应用于各种网页开发中。
本文将介绍Bootstrap的基础教程以及相关案例代码，帮助读者快速掌握Bootstrap的使用方法。
二、Bootstrap基础教程1. 栅格系统Bootstrap基于12列的栅格系统，可以轻松实现页面布局。
以下是一个简单的例子：```html<div class="cont本人ner"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div>```在这个例子中，页面被分成了三列，每一列占据了页面宽度的1/3。
2. 响应式工具类Bootstrap提供了一系列的响应式工具类，可以根据不同的屏幕尺寸来显示或隐藏元素。
要在小屏幕设备上隐藏一个元素，可以使用`d-none d-sm-block`类：```html<div class="d-none d-sm-block">在小屏幕设备上隐藏该元素</div>```3. 按钮Bootstrap提供了丰富的按钮样式，可以轻松地创建不同风格的按钮。
以下是一个简单的例子：```html<button type="button" class="btn btn-primary">Primary按钮</button><button type="button" class="btn btn-secondary">Secondary按钮</button>```4. 表格使用Bootstrap可以轻松创建各种样式的表格。
BootStrap入门学习(2)
•
Bootstrap环境安装
• Bootstrap下载 – 下载的中文地址：/
Bootstrap环境安装
• 使用 Bootstrap 中文网提供的免费 CDN 加速服务 – Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基 于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度 和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提 供了 CDN 加速服务，请进入BootCDN()主页查看更 多可用的工具库。 什么是CDN加速服务？ – CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节， 使内容传输的更快、更稳定。
•
•
CSS全局样式——表格
• 鼠标悬停 – 通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出 响应。 – <table class="table table-hover">...</table> 紧缩表格 – 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补 （padding）均会减半。 – <table class="table table-condensed">...</table> 状态类 – 通过这些状态类可以为行或单元格设置颜色。 – .active 鼠标悬停在行或单元格上时所设置的颜色 – .success 标识成功或积极的动作 – .info 标识普通的提示信息或动作 – .warning 标识警告或需要用户注意 – .danger 标识危险或潜在的带来负面影响的动作
请简述bootstrap的主要组成部分及其各部分的作用。
请简述bootstrap的主要组成部分及其各部分的作用。
：
Bootstrap是一种流行的前端开发框架，它提供了一套完整的工具集，用于快速构建响应式和移动优先的网站。
以下是Bootstrap的主要组成部分及其作用：
1.CSS：Bootstrap的基础CSS提供了基本的样式和布局，包括排版、表格、表单、按
钮、导航等。
2.布局工具：Bootstrap提供了一套灵活的栅格系统，用于创建响应式布局。
栅格系统
将屏幕分为12列，开发者可以根据需要自由地组合这些列，以适应不同屏幕尺寸。
3.组件：Bootstrap包含了大量的可重用组件，如导航栏、下拉菜单、警告框、进度条
等。
这些组件都经过了优化，以便在不同的设备和屏幕尺寸上都能正常工作。
4.JavaScript插件：Bootstrap提供了许多JavaScript插件，用于增强网站的功能，如模
态框、轮播图、下拉菜单等。
5.定制：如果需要，开发者可以根据自己的需求定制Bootstrap的样式和组件。
使用Dreamweaver和Bootstrap创建响应式网站的基本步骤
使用Dreamweaver和Bootstrap创建响应式网站的基本步骤第一章：介绍在当前数字化时代，一个快速、易用且吸引人的网站对于企业或个人而言至关重要。
创建具有响应式设计的网站是一个明智的选择，因为它能够适应不同的设备和屏幕尺寸。
本文将介绍使用Dreamweaver和Bootstrap创建响应式网站的基本步骤。
第二章：选择合适的布局在使用Dreamweaver创建响应式网站之前，首先要选择适当的布局。
Bootstrap提供了各种各样的预定义布局，可以根据需求选择合适的布局，如固定布局、流式布局等。
这些布局在各种设备上都能自动适应，并提供良好的用户体验。
第三章：设置基本结构在Dreamweaver中创建新网页后，设置HTML文档的基本结构是很重要的。
合理的网页结构可以帮助搜索引擎更好地理解网页内容，并且方便后续的开发工作。
在设置基本结构时，应根据实际需要添加适当的标签和元素，如标题、导航、页脚等。
第四章：引入Bootstrap框架Dreamweaver与Bootstrap框架完美结合，可以极大地简化网页开发的过程。
通过在HTML文档中引入Bootstrap的CSS和JavaScript文件，可以直接使用Bootstrap提供的丰富组件和样式来构建网站。
通过使用预定义的类，可以轻松地创建各种元素，如按钮、表格、表单等。
第五章：定制网站样式虽然Bootstrap提供了许多预定义的样式，但根据个人或企业的需求，往往需要进行一些样式的定制。
Dreamweaver提供了直观的CSS编辑器，可以轻松地编辑网页的样式。
通过修改CSS属性、添加新的样式规则等操作，可以实现网站的个性化定制。
第六章：适配不同设备响应式设计的关键在于能够在不同的设备和屏幕尺寸上提供良好的用户体验。
通过使用Bootstrap提供的响应式工具类，可以轻松实现网站在各种设备上的适配。
通过使用媒体查询和栅格系统，可以让网页的布局在不同的屏幕尺寸下自动调整，并保持良好的可读性和可用性。
Bootstrap框架的简介
Bootstrap框架的简介⼀、Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应⽤程序⽽设计的⼀套前端⼯具包。
它⽀持响应式布局，并且在V3版本之后坚持移动设备优先。
Bootstrap是⼀个前端开发的框架，其实就是⼀堆HTML代码，有⼀些⾃带的CSS样式类（只需要记忆常⽤的CSS样式类）为什么要使⽤Bootstrap？在Bootstrap出现之前：命名：重复、复杂、⽆意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页⾯：错乱、不规范、不和谐在使⽤Bootstrap之后：各种命名都统⼀并且规范化。
页⾯风格统⼀，画⾯和谐。
Bootstrap下载我们使⽤V3版本的Bootstrap，我们下载的是⽤于⽣产环境的Bootstrap。
Bootstrap环境搭建⽬录结构：bootstrap-3.3.7-dist/├── css // CSS⽂件│├── bootstrap-theme.css // Bootstrap主题样式⽂件│├── bootstrap-theme.css.map│├── bootstrap-theme.min.css // 主题相关样式压缩⽂件│├── bootstrap-theme.min.css.map│├── bootstrap.css│├── bootstrap.css.map│├── bootstrap.min.css // 核⼼CSS样式压缩⽂件│└── bootstrap.min.css.map├── fonts // 字体⽂件│├── glyphicons-halflings-regular.eot│├── glyphicons-halflings-regular.svg│├── glyphicons-halflings-regular.ttf│├── glyphicons-halflings-regular.woff│└── glyphicons-halflings-regular.woff2└── js // JS⽂件├── bootstrap.js├── bootstrap.min.js // 核⼼JS压缩⽂件└── npm.js处理依赖由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery⽂件，来保证Bootstrap相关组件运⾏正常。
Bootstrap每天必学之栅格系统（布局）
Bootstrap每天必学之栅格系统（布局）1、栅格系统（布局）Bootstrap内置了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。
我在这⾥是把Bootstrap中的栅格系统叫做布局。
它就是通过⼀系列的⾏（row）与列（column）的组合创建页⾯布局，然后你的内容就可以放⼊到你创建好的布局当中。
下⾯就简单介绍⼀下Bootstrap栅格系统的⼯作原理：⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。
Bootstrap框架中的⽹格系统就是将容器平分成12份。
在使⽤的时候⼤家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使⽤）。
2、使⽤规则Bootstrap内置了⼀套响应式、移动设备。
1、数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐⽅式和内距(padding)。
如：<div class="container"><div class="row"></div></div>2、在⾏(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，⽐如12。
如：<div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div>3、具体内容应当放置在列容器（column）之内，⽽且只有列（column）才可以作为⾏容器(.row)的直接⼦元素4、通过设置内距（padding）从⽽创建列与列之间的间距。
bootstrap表格样式大全
bootstrap表格样式⼤全
<table class="table">基本表格:如果您想要⼀个只带有内边距（padding）和⽔平分割的基本表，请添加 class .table，如下⾯实例所⽰
<table class="table table-striped">条纹表格:通过添加.table-striped class，您将在 <tbody> 内的⾏上看到条纹，如下⾯的实例所⽰：
<table class="table table-bordered">边框表格通过添加.table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆⾓的，如下⾯的实例所⽰：
<table class="table table-hover">悬停表格:通过添加.table-hover class，当指针悬停在⾏上时会出现浅灰⾊背景，如下⾯的实例所⽰：
<table class="table table-condensed">精简表格:通过添加.table-condensed class，⾏内边距（padding）被切为两半，以便让表看起来更紧凑，如下⾯的实例所⽰。
这在想让信息看起来更紧凑时⾮常有⽤。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
东软睿道Bootstrap 框架 排版样式•Bootstrap 排版类•Bootstrap 排版类•Bootstrap 排版类页面主体样式•Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；•<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。
•为了给段落添加强调文本，则可以添加class=“lead”，这将得到更大更粗、行高更高的文本示例 index1.html–<p>Bootstrap 框架</p>–<p class="lead">Bootstrap 框架</p>–<p>Bootstrap 框架</p>–<p>Bootstrap 框架</p>–<p>Bootstrap 框架</p>•Bootstrap 分别对h1 ~ h6 进行了CSS 样式的重构，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。
示例 index1.html–<h1>Bootstrap 框架</h1> //36px–<h2>Bootstrap 框架</h2> //30px–<h3>Bootstrap 框架</h3> //24px–<h4>Bootstrap 框架</h4> //18px–<h5>Bootstrap 框架</h5> //14px–<h6>Bootstrap 框架</h6> //12px•Bootstrap还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能示例 index1.html–<span class="h1">Bootstrap</span>•向任何标题h1 ~ h6添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加.small class，这样子您就能得到一个字号更小的颜色更浅的文本示例 index1.html–<h1>Bootstrap 框架<small>Bootstrap 小标题</small></h1> –<h2>Bootstrap 框架<small>Bootstrap 小标题</small></h2> –<h3>Bootstrap 框架<small>Bootstrap 小标题</small></h3> –<h4>Bootstrap 框架<small>Bootstrap 小标题</small></h4> –<h5>Bootstrap 框架<small>Bootstrap 小标题</small></h5> –<h6>Bootstrap 框架<small>Bootstrap 小标题</small></h6>•h1 ~ h3 下small 元素的大小只占父元素的65%，那么通过计算，h1 ~ h3 下的small 为23.4px、19.5px、15.6px；•h4 ~ h6 下small 元素的大小只占父元素的75% ,分别为：13.5px、10.5px、9px。
•在h1 ~ h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。
内联文本样式•添加标记，<mark>元素或.mark 类–<p>Bootstrap<mark>框架</mark></p>•各种加线条的文本示例 index1.html –<del>Bootstrap 框架</del> //删除的文本–<s>Bootstrap 框架</s> //无用的文本–<ins>Bootstrap 框架</ins> //插入的文本–<u>Bootstrap 框架</u> //效果同上，下划线文本内联文本样式•HTML 的默认强调标签 <small>（设置文本为父文本大小的85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
•各种强调的文本示例 index1.html–<small>Bootstrap 框架</small> //标准字号的85%–<strong>Bootstrap 框架</strong> //加粗700–<em>Bootstrap 框架</em> //倾斜对齐样式•设置文本对齐示例 index1.html–<p class="text-left">Bootstrap 框架</p> //居左–<p class="text-center">Bootstrap 框架</p> //居中–<p class="text-right">Bootstrap 框架</p> //居右–<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳–<p class="text-nowrap">Bootstrap 框架</p> //不换行大小写样式•设置英文文本大小写示例 index2.html–<p class="text-lowercase">Bootstrap 框架</p> //小写–<p class="text-uppercase">Bootstrap 框架</p> //大写–<p class="text-capitalize">Bootstrap 框架</p>//首字母大写缩略语样式•HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP•Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。
•为了得到一个更小字体的文本，添加 .initialism 到 <abbr>。
•缩略语示例 index2.html–Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>•使用 <address> 标签，设置地址，去掉了倾斜，设置了行高，底部20px•由于 <address> 默认为 display:block;，需要使用标签来为封闭的地址文本添加换行。
•地址示例 index2.html<address><strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890</address>•可以在任意的 HTML 文本旁使用默认的 <blockquote>。
使用class .pull-right向右对齐引用，使用class. blockquote-reverse 反向引用。
示例 index2.html•默认样式引用，增加了左边线，设定了字体大小和内外边距–<blockquote>Bootstrap 框架</blockquote>•反向引用<blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>•Bootstrap 支持有序列表、无序列表和定义列表。
•有序列表：有序列表是指以数字或其他有序字符开头的列表。
•无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。
–可以使用 class .list-unstyled来移除样式。
–可以通过使用 class .list-inline把所有的列表项放在同一行中。
•定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。
–<dt> 代表定义术语–<dd> 是 <dt> 的描述–使用 class .dl-horizontal可以把 <dl> 行中的术语与描述并排显示。
•移出默认样式示例 index3.html <ul class="list-unstyled"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>•设置成内联示例 index3.html <ul class="list-inline"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>•水平排列描述列表示例 index3.html<dl class="dl-horizontal"><dt>Bootstrap</dt><dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。