search

Home >Web Front-end >HTML Tutorial >BootStrap学习（2）_html/css_WEB-ITnose

BootStrap学习（2）_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:34:571061browse

使用Bootstrap添加代码框

　　可先看：简介、引入、包下载等：

Bootstrap 允许您以两种方式显示代码：

  • 第一种是 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
  • 第二种是 
     标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre class="brush:php;toolbar:false"> 标签。

    • 请确保当您使用 

     和 <code> 标签时，开始和结束标签使用了 unicode 变体：<strong> a629f6259302a473d69864988157bf45(代表">")</strong>。    <p>让我们来看看下面的实例：</p>    <p class="sycode">          <pre class="precsshui"><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>Bootstrap 实例 - 代码</title>   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><p><code><header></code> 作为内联元素被包围。</p><p>如果需要把代码显示为一个独立的块元素，请使用 <pre class="brush:php;toolbar:false"> 标签：</p><pre class="brush:php;toolbar:false">   <article>      <h1>Article Heading</h1>   </article>

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：设计响应式布局，谷歌浏览器出现异常_html/css_WEB-ITnoseNext article：利用sublime的snippet功能快速创建代码段_html/css_WEB-ITnose

    Related articles

    See more