Inhaltsverzeichnis
改变按钮大小
改变按钮状态
激活状态
禁用状态
按钮标签
Heim Web-Frontend HTML-Tutorial BootStrap学习(2)_html/css_WEB-ITnose

BootStrap学习(2)_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

使用Bootstrap添加代码框

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

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

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

     和 <code> 标签时,开始和结束标签使用了 unicode 变体:<strong> &lt;(代表“<”)</strong> 和 <strong>&gt;(代表"&gt;")</strong>。    <p>让我们来看看下面的实例:</p>    <p class="sycode">          <pre class='brush:php;toolbar:false;'><!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>&lt;header&gt;</code> 作为内联元素被包围。</p><p>如果需要把代码显示为一个独立的块元素,请使用 &lt;pre&gt; 标签:</p><pre class="brush:php;toolbar:false">   &lt;article&gt;      &lt;h1&gt;Article Heading&lt;/h1&gt;   &lt;/article&gt;
    Nach dem Login kopieren

    结果:

    Bootstrap 按钮的使用

      任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

      以下样式可用于,

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße Artikel -Tags

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

    Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

    Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

    Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

    Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

    Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

    Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

    Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

    Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

    Was ist der Zweck des & lt; Meter & gt; Element?

    Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

    Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

    Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

    Was ist der Zweck des & lt; datalist & gt; Element?

    Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

    Was ist der Zweck des & lt; Fortschritts & gt; Element?

    See all articles