Bootstrap实战教程

格式：pdf
大小：2.62 MB
文档页数：20

下载文档原格式

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入门教程（一）之可视化布局

BootStrap⼊门教程（⼀）之可视化布局HTML模板：<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world!</h1><script src="https:///jquery.js"></script><script src="js/bootstrap.min.js"></script></body></html> 在这⾥，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css ⽂件，⽤于让⼀个常规的 HTML ⽂件变为使⽤了 Bootstrap 的模板。

Bootstrap入门与布局教程课件

实现原理
通过定义容器的大小，平分为12份调整内外边距结合媒体查询
9/44
栅格系统工作原理
一行数据（row）必须包含在 .container中浏可，览视以器区域便为
其赋予合容适器 c的ont对aine齐r 方式和内列与边列距间距 30px 使用行在水平方向列创colu建mn一组列
列右间距
4/44
新手入门开发环境（webstorm）引入Bootstrap框架文件
压缩处理文件bootstrap.min.css，bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务
5/44
基本模板
<html>

<head lang="en">
示例
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
</div>
演示示例3：Bootstrap列偏移
13/44
列嵌套
使用列组合的方式如何布局？
示例

bootstrap响应式网站开发实例教程课件第3章第1节

</div>
<div class="row"> <div class="col-md-8">占8列</div> <div class="col-md-4">占4列</div>
</div>
<div class="row"> <div class="col-md-6">占6列一半</div> <div class="col-md-6">占6列一半</div>
中型设备台式电脑（≥992px）
以折叠开始，断点以上是水平的
970px
.col-md12
~78px 30px 列的两侧分别 15px Yes Yes Yes
大型设备台式电脑（≥1200px）
以折叠开始，断点以上是水平的
1170px
.col-lg12
~95px 30px 列的两侧分别 15px Yes Yes Yes
B o o t s t r a p 栅格系统 - - Bootstrap栅格系统的原理
运行“实例1”的页面效果，拖动浏览器改变浏览器的宽度，可以看到不同的效果。当屏幕<992px后，所有的列变成从上到下依次排列，在浏览器的宽度为 800px 和 600px呈现的效果是一样的，如图3-4所示。
a)
图3-4 应用栅格系统布局网站的效果 b）
a) 宽度为800px时的页面效果 b）宽度为600px时的页面效果
B o o t s t r a p 栅格系统 - - Bootstrap栅格系统的原理

BOOTSTRAP教程

图2-2 引用(Blockquotes) 代码片段如下所示：
<divclass="row"> <divclass="span6 "> <blockquoteclass="pull-right"> <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。 </p> </blockquote> </div> <divclass="span6 "> <blockquote> <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。</p> 守夜人军守夜人军团总司令.<small>蒙奇.D.<citetitle="">路飞</cite></small>
图1-1 默认格网系统(Default G rid System) 以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个 div.
<divclass="row"> <divclass="span4">...</div> <divclass="span8">...</div> </div>
嵌套的 div 长度之和不能大于它的父 div，否则会溢出叠加。各位可以试试将第一层的 div 长度改为其他值，看看效果。流式格网系统(Fluid grid system).它使用%，而不是固定的 px,来确定页面要素的宽度.只需要简单的将. row 改成.row-fluid ，就可以将 fixed 行改为 fluid.如图1-4所示：

个人学习总结-BootStrap入门教程

图1-1
说明：
1）<meta name="viewport" content="width=device-width,initial-scale=1.0">
使用来修复网页在移动设备上显示的问题
2）
这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理
4）在head中的bootstrap-responsive.css是非必须文件，可以不引入，这个文件的主要作用是做一个响应式的网页。
5）在网页中bootstrap.css是bootstrap中的样式文件，bootstrap.js是脚本文件，两个文件相互对应，引入的顺序和位置一般是：CSS文件在head标签中引入，js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。
<li>adsf</li>
<li>asdf</li>
</ol>
<h2>描述列表</h2>
<dl class="dl-horizontal">
<dt>adf</dt>
<dd>dasfdafadsf</dd>
<dt>adf</dt>
<dd>adfadsf</dd>
<dt> adsf</dt>

bootstrap响应式网站开发实例教程课件第5章

<div class="container" > <div class="row" style="width:80%;margin: 5px auto;"> <<tatabblelecclalassss==""ttaabblelettaabbllee--ssttrriippeedd"">> <thead> <tr> <th>课程名称</th> <th>授课老师</th> <th>选课人数</th> </tr> </thead> <tbody> <tr> <td>网站设计与制作</td> <td>刘老师</td> <td>300</td> </tr> <tr> <td>Photoshop</td> <td>章老师</td> <td>300</td> </tr> <tr> <td>C语言程序设计</td> <td>殷老师</td> <td>300</td> </tr> </tbody> </table> </div>
在页面关联了Bootstrap的CSS文件后，除了在<table> 标签中添加class .table之外继续添加.table-striped类后，即<table class= "tab图le5-t5a条bl纹e-状st表ri格ped" >，就会得到一个具有条纹效果的表格。

bootstrap教程ppt

– <ul class = “list-unstyled”>……</ul> – <ol class = “list-unstyled”>……</ol> • 内联列表 – 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元
CSS全局样式——排版
• 改变大小写 – class =“text-lowercase” 转成小写 – class = “text-uppercase”转成大写 – class = “text-capitalize”首字母大写
• 无序列表——顺序无关紧要的一组元素 • 有序列表——顺序至关重要的一组元素 • 无样式列表
Bootstrap基本模板
• Bootstrap模板注意事项 – Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5 的。 – Bootstrap文件当字符集设置，也要遵循HTML5的规范。 – 设置IE浏览器兼容模式(X-UA-Compatible)。 – 设置模板，适用于所有平台(viewport )。 – 引入bootstrap的CSS主文件(bootstrap.min.css)。 – 引入jQuery插件的主文件(jQuery) – 引入bootstrap的JS主文件(bootstrap.min.js)
BootStrap入门学习 Part 1
Bootstrap简介
• 什么是 Bootstrap？ – Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。 Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 – Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 – Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 – Bootstrap简洁灵活，使得 Web 开发更加快捷。 – Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。

BootStrap

Bootstrap 包的内容
• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。 • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。 • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。 • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。 • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本
使用col-md-offset-x定义偏移量
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从1 到 11。
可嵌套偏移量
列排序
Yes
Yes
Yes
Yes
细节
• <div class="container">...</div> 元素被添加，确保适当的居中和最大宽度。 • 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md6"></div>。 • 网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。 • 您可以尝试其他更多的选项，比如 <div class="col-md3"></div> 和 <div class="col-md-9"></div> 或 <div class="colmd-7"></div> 和 <div class="col-md-5"></div>。 • 您可以尝试一下，确保总和总是 12。

bootstrapadminlte教程1基础布局

bootstrapadminlte教程1基础布局Bootstrap AdminLTE 是一套功能强大的后台管理模板，基于Bootstrap 框架和 AdminLTE 主题进行开发。

它提供了丰富的组件和样式，能够帮助开发者快速搭建现代化的后台管理系统。

在本教程中，我们将介绍 Bootstrap AdminLTE 的基础布局。

该布局是一个响应式的三栏结构，包括一个固定的顶部导航栏、一个固定的侧边栏和一个可变宽度的主内容区域。

```html<!DOCTYPE html><html><head><meta charset="utf-8"><title>AdminLTE ， Basic Layout</title><link rel="stylesheet"href="path/to/bootstrap/css/bootstrap.min.css"><link rel="stylesheet"href="path/to/AdminLTE/css/adminlte.min.css"></head><script src="path/to/jquery/jquery.min.js"></script><script src="path/to/bootstrap/js/bootstrap.min.js"></script> <script src="path/to/AdminLTE/js/adminlte.min.js"></script></body></html>```上面的代码中，我们引入了 Bootstrap CSS、AdminLTE CSS、jQuery、Bootstrap JavaScript 和 AdminLTE JavaScript。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html> <html> <head> <title>Bootstrap in practice: the grid system</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" />  <link href="///bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <h1>Hello, world!</h1> </body> </html>
<!DOCTYPE html> <html> <head> <title>Bootstrap in practice: the grid system</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" />  <link href="///bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <h1>Hello, world!</h1> <p>Asymmetrical YOLO banjo lomo fanny pack, shoreditch flexitarian dreamcatcher ethnic kitsch sriracha nisi sustainable swag. Cliche 90's farm-to-table master cleanse Pinterest jean shorts. Cillum raw denim aesthetic sunt.</p> <p>Aliqua photo booth literally veniam minim leggings, est craft beer banjo intelligentsia Truffaut officia. Irony minim 3 wolf moon meggings, viral hella hoodie selvage flexitarian small batch pariatur.</p> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p> <p>Wayfarers selvage YOLO, commodo assumenda eu est bespoke mlkshk. Helvetica reprehenderit iPhone, aesthetic 90's literally chambray bicycle rights viral blog voluptate. Occupy bespoke stumptown duis keytar vero.</p> </body> </html>
• •
HTML5: achieved declaring a <!DOCTYPE html> Bootstrap CSS: gently hosted by NetDNA
Take a look at the page in a browser, and you'll see a lonely – but stylish – Hello, world!.
BABY STEPS
21
Section 2
ADDING SOME BEEF
You are going to see the grid system in action very soon, but ﬁrst you need to beef up your page with some random content. I'll take mine from hipsteripsum.me, but the classic or any editor plugin will be ﬁne as well.
2. YOUR FIRST PAGE
BOOTSTRAP IN PRn 1
BABY STEPS
It's super easy to put together a basic page with Bootstrap. Just ﬁre up your editor and type in this markup:
2. YOUR FIRST PAGE
22
Section 3
HERE COMES THE GRID
Let's start with a very simple layout: two columns, two paragraphs per column.
2. YOUR FIRST PAGE
23
<!DOCTYPE html> <html> <head> <title>Bootstrap in practice: the grid system</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" />  <link href="///bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />  <style> .row > div { background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; } </style> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6"> <p>Asymmetrical YOLO banjo lomo fanny pack, shoreditch flexitarian dreamcatcher ethnic kitsch sriracha nisi sustainable swag. Cliche 90's farm-to-table master cleanse Pinterest jean shorts. Cillum raw denim aesthetic sunt.</p> <p>Aliqua photo booth literally veniam minim leggings, est craft beer banjo intelligentsia Truffaut officia. Irony minim 3 wolf moon meggings, viral hella hoodie selvage flexitarian small batch pariatur.</p> </div> <div class="col-md-6"> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p> <p>Wayfarers selvage YOLO, commodo assumenda eu est bespoke mlkshk. Helvetica reprehenderit iPhone, aesthetic 90's literally chambray bicycle rights viral blog voluptate. Occupy bespoke stumptown duis keytar vero.</p> </div> </div> </div> </body> </html>
Heads up!
You'd better serve these pages locally. If you have Ruby, your best bet is to gem install serve and then launch serve . from the directory where your HTML ﬁle resides. Then point your browser to http://localhost:4000/ and you are golden. If you can't or don't want to serve your pages locally, then please change every protocol relative URL in the sources to its more classic variant, or your browser may not be able to ﬁnd those resources. Example: change ///bootstrap/3.0.0/

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

页数:5
Bootstrap实战教程

页数:20
黑马程序员UI教程：Bootstrap弹出框

页数:4
Bootstrap入门与布局教程

页数:36
适合初学者的教程——Bootstrap表格

页数:8
《BootStrap开发技术》课程标准.doc

页数:20
响应式网页开发基础教程(jQuery+Bootstrap)第1章响应式网页设计基础

页数:19
bootstrap响应式网站开发实例教程课件第3章第1节

页数:21
BootStrap入门教程

页数:45
适合初学者的教程——Bootstrap导航栏

页数:5