`

Bootstrap 第2章 排版样式

阅读更多
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>排版样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="prettify/prettify.css">
</head>
<body style="margin:50px;" onload="prettyPrint()">

<!--
<p>阅谁问君诵,水落清香浮</p>
<p class="lead">阅谁问君诵,水落清香浮</p>
<p>阅谁问君诵,水落清香浮</p>
<p>阅谁问君诵,水落清香浮</p>

<h1>阅谁问君诵<small>水落清香浮</small></h1>
<h2>阅谁问君诵<small>水落清香浮</small></h2>
<h3>阅谁问君诵<small>水落清香浮</small></h3>
<h4>阅谁问君诵<small>水落清香浮</small></h4>
<h5>阅谁问君诵<small>水落清香浮</small></h5>
<h6>阅谁问君诵<small>水落清香浮</small></h6>

<h1 class="h3">阅谁问君诵<small>水落清香浮</small></h1>
<span class="h3">阅谁问君诵<small>水落清香浮</small></span>

<p>阅谁问君诵<mark>水落清香浮</mark></p>
<del>阅谁问君诵,水落清香浮</del>
-->

<p class="text-left">onestopweb 一站式网络</p>
<p class="text-center">onestopweb 一站式网络</p>
<p class="text-right">onestopweb 一站式网络</p>
<p class="text-nowrap" style="border:1px solid red; width:50px;">onestopweb 一站式网络</p>
<address>地址</address>
<blockquote>引用文本</blockquote>
<blockquote class="blockquote-reverse">引用文本</blockquote>
<ul class="list-unstyled list-inline">
	<li>onestopweb 一站式网络</li>
    <li>onestopweb 一站式网络</li>
    <li>onestopweb 一站式网络</li>
</ul>
<dl class="dl-horizontal">
	<dt>一站式网络</dt>
    <dd>一个分享网站,一个分享网站,一个分享网站,一个分享网站,一个分享网站,一个分享网站</dd>
</dl>
<code>&lt;section&gt;</code>
<p></p>

<pre class="prettyprint linenums">&lt;ul class=&quot;list-unstyled list-inline&quot;&gt;<br>	&lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>&lt;/ul&gt;</pre>




<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="prettify/prettify.js"></script>
</body>
</html>

 

效果图:

 

 

 

  • 大小: 71.6 KB
1
2
分享到:
评论

相关推荐

    第二章之Bootstrap 页面排版样式

    在本章中,我们将深入探讨Bootstrap的页面排版样式,这包括标题、页面主体、对齐方式以及列表等基本内容。 首先,让我们关注页面主体。Bootstrap对全局的CSS样式进行了设定,确保了一致的视觉效果。基础的字体大小...

    《响应式网页开发实战》教学教案—第14章 Bootstrap样式.pdf

    响应式网页开发实战中的第14章主要讲解了如何利用Bootstrap框架来构建高效且美观的网页,特别是关于天气预报和机票预订的实例。Bootstrap是一种流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件...

    李炎恢bootstrap3.pdf合并版带目录

    第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章,后面带开发实例!

    视频案例-1.初识Bootstrap_美联英语_视频案例-1.初识Bootstrap_

    3. **预定义的类**:Bootstrap提供了一系列预定义的CSS类,如文本对齐、颜色样式、排版样式等,大大简化了页面样式的设置。例如,`.text-center`用于居中文本,`.bg-primary`用于设置背景色。 4. **导航栏(Navbar...

    李炎恢Bootstrap视频教程配套讲义.pdf

    本讲义是李炎恢的关于bootstrap的公开课教程(2015年)配套讲义,共有25个部分,详细讲述了bootstrap的使用方法和技巧,强烈推荐想学习...第1章 Bootstrap介绍、第2章 排版样式、....、第20章 项目实战--案例和关于[7]

    BootStrap实战 随书源码第2章

    在《BootStrap实战》一书中,第二章通常会深入介绍Bootstrap的基础知识和核心概念。 1. **响应式设计**:Bootstrap通过栅格系统实现了响应式设计,这意味着网站可以根据不同设备的屏幕尺寸自动调整布局。这一特性...

    Bootstrap入门书籍之(一)排版

    在本文中,我们将深入探讨Bootstrap入门书籍的第一部分:排版。 排版在网页设计中扮演着至关重要的角色,因为它决定了内容的可读性和整体视觉效果。Bootstrap的排版组件旨在提供一致且易于使用的样式,简化了创建...

    bootstrap卡片排版教程.docx

    这是第二个卡片的内容。 点击这里 &lt;!-- 更多卡片 --&gt; ``` - `.container` 表示容器,用来包含所有内容。 - `.row` 表示一行,可以容纳多个列。 - `.col-md-4` 表示每列占据屏幕宽度的1/3,在中号屏幕及...

    BOOTSTRAP实战

    , 全书一共10章:第1章和第2章介绍了Bootstrap的构成组件、功能特色、开发工具、应用情况,以及它的下载和应用解析;第3章对Bootstrap框架进行了解析,包含全局样式表、栅格系统、布局、响应式设计等内容;第4章讲解...

    Bootstrap用户手册:设计响应式网站-带书签.pdf

    Bootstrap提供的网站框架1.1 Bootstrap到底是什么1.2 Bootstrap的文件结构1.3 基本的HTML模板1.4 全局样式1.5 默认网格系统1.6 流式网格系统1.7 容器布局1.8 响应式设计第2章 Bootstrap预定义的CSS样式2.1 排版2.2 ...

    bootstrap基础代码实践

    Bootstrap提供了一系列预定义的CSS类,用于快速实现诸如排版、颜色、间距、表格、按钮、图标等常见样式。开发者可以通过添加或覆盖这些类来定制自己的设计风格。 5. **组件** Bootstrap包含多种可复用的UI组件,...

    《BootStrap实战》随书源码第1-3章

    第二章:Bootstrap组件 这一章将深入讲解Bootstrap的各种组件,包括导航条(Navbar)、下拉菜单(Dropdown)、按钮(Button)、表单(Form)、模态框(Modal)、警告提示(Alert)和卡片(Card)。这些组件是...

    bootstrap极客学院上

    3. **样式**:Bootstrap的CSS样式包括了全局的HTML元素样式、可自定义的排版(typography)、颜色方案以及间距(spacing)规则,确保了整体设计的一致性。 4. **JavaScript插件**:Bootstrap的一些组件依赖于...

    bootstrap-2.3.2-dist

    3. **样式和排版**:Bootstrap提供了丰富的CSS类,可以快速改变字体、颜色、间距等样式,以及对齐、浮动和响应式布局的处理。此外,它还有一套统一的栅格系统,用于创建灵活的网格布局。 4. **JavaScript插件**:...

    bootstrap教程

    1. **第2章 排版样式**:Bootstrap的核心之一就是其强大的排版系统。这一章可能讲解了基本的HTML元素如段落、标题、引用等的样式设置,以及如何通过栅格系统创建响应式的布局。栅格系统允许开发者通过行(row)和列...

    一头扎进Bootstrap3-11

    6. **排版与类型**:Bootstrap3提供了一套清晰的排版规则,包括文本对齐、字体大小、行高和段落间距等。此外,还有一系列预定义的标题样式和内联元素样式,如`&lt;code&gt;`、`&lt;abbr&gt;`、`&lt;blockquote&gt;`等。 7. **表单控件...

    bootstrap3.3.4.rar

    这些CSS文件定义了Bootstrap的全局样式,如排版、颜色方案、网格系统等。还有响应式布局相关的媒体查询,确保在不同设备上的良好显示。 2. JavaScript 插件:Bootstrap提供了一系列JavaScript插件,如模态框(modal...

    bootstrap3.3.7版本

    Bootstrap的CSS覆盖了字体、颜色、间距、边框、背景等基本样式,还有诸如排版、表格、媒体对象、代码高亮等更高级的样式。3.3.7版本中对这些样式进行了优化,以确保在各种环境下都能呈现出一致的外观。 四、...

Global site tag (gtag.js) - Google Analytics