gpt4 book ai didi

css - Bootstrap 选项卡可以显示代码吗?

转载 作者:行者123 更新时间:2023-11-28 07:19:00 27 4
gpt4 key购买 nike

我想使用 Bootstrap 面板和选项卡来显示图像,然后在选项卡上显示代码。我怎样才能做到这一点?我正在用 haml 写作。使用 pre 和 code 标签的正确方法是什么?当我执行此操作时,HTML 中的代码会执行表单,但我只想展示我使用的代码如何执行此操作。

谢谢

enter image description here

    .col-md-4
.panel.panel-default
.panel-body
.container
%ul.nav.nav-tabs
%li.active
%a{:href => "#home"} Preview
%li
%a{:href => "#menu1"} HTML
%li
%a{:href => "#menu2"} HAML
.tab-content
#home.tab-pane.fade.in.active
.col-md-3
%img{:alt => "Forms", :src => image_path('form.png'), :style => 'width: 100%; height: auto;'}
#menu1.tab-pane.fade
%h3 HTML
%pre
%code
%p
<div class="section section-form">
<div class="section-head">Form</div>
<div class="section-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" disabled>
</div>

最佳答案

明白了

               %pre
%code
:ruby
html = <<-HTML
<div class="section section-form">
<div class="section-head">Form</div>
<div class="section-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" disabled>
</div>
HTML
= html

关于css - Bootstrap 选项卡可以显示代码吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32196998/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com