blocks|key|4406755|text|不幸的是，materialize不像bootstrap那样提供警报。您可以改用card-panel类：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4406756|http://materializecss.com/color.html|4406757|但是你不会有关闭按钮来隐藏它。|4406758|entityMap|0|LINK|mutability|MUTABLE|url^0|13|A|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

<p>Unfortunately materialize doesn't provide alerts as bootstrap does.
You can use <code>card-panel</code> class instead:</p>

<p><a href="http://materializecss.com/color.html" rel="nofollow">http://materializecss.com/color.html</a></p>

<p>But you won't have close button to hide it.</p>


blocks|key|4406805|text|Materializecss警告框+Codepen+link+|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4406806|<div+class="row"+id="alert_box">
+<div+class="col+s12+m12">
++<div+class="card+red+darken-1">
+++<div+class="row">
++++<div+class="col+s12+m10">
++++++<div+class="card-content+white-text">
++++++++<p>1.+Username+cant+be+empty</p>
++++++++<p>2.+Password+cant+be+empty</p>
++++++++<p>3.+Address+cant+be+empty</p>
++++++++<p>4.+Name+cant+be+empty</p>
++++</div>
++</div>
++<div+class="col+s12+m2">
++++<i+class="fa+fa-times+icon_style"+++++++++++++++++++++++++++++id="alert_close"+aria-hidden="true"></i>
++</div>
++</div>
++</div>
++</div>
++</div>

.icon_style{
position:+absolute;
right:+10px;
top:+10px;
font-size:+20px;
color:+white;
cursor:pointer;+
}

$('#alert_close').click(function(){
$(+"#alert_box"+).fadeOut(+"slow",+function()+{
});
});|code-block|syntax|javascript|4406807|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/pradeep1616/pen/LxaRRB^0|H|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Materializecss alert box
<a href="http://codepen.io/pradeep1616/pen/LxaRRB" rel="noreferrer"> Codepen link </a></p>

<pre><code>&lt;div class="row" id="alert_box"&gt;
 &lt;div class="col s12 m12"&gt;
  &lt;div class="card red darken-1"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col s12 m10"&gt;
      &lt;div class="card-content white-text"&gt;
        &lt;p&gt;1. Username cant be empty&lt;/p&gt;
        &lt;p&gt;2. Password cant be empty&lt;/p&gt;
        &lt;p&gt;3. Address cant be empty&lt;/p&gt;
        &lt;p&gt;4. Name cant be empty&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col s12 m2"&gt;
    &lt;i class="fa fa-times icon_style"                             id="alert_close" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;

.icon_style{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: white;
cursor:pointer; 
}

$('#alert_close').click(function(){
$( "#alert_box" ).fadeOut( "slow", function() {
});
});
</code></pre>


blocks|key|4407026|text|您可以使用Matdialog.js创建不同类型的对话框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4407027|请访问-+MatDialog.js+website|offset|length|4407028|entityMap|0|LINK|mutability|MUTABLE|url|https://ujjwalguptaofficial.github.io/MatDialog/^0|0|5|K|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>You can use Matdialog.js to create different types of dialogboxes.</p>

<p>check it out at - <a href="https://ujjwalguptaofficial.github.io/MatDialog/" rel="nofollow noreferrer">MatDialog.js website</a></p>


blocks|key|4407052|text|因为这还没有答案，所以我做了一些可能对你有帮助的东西。Here+is+the+repo|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4407053|这是一个预告片。|4407054|​|4407055|html+{
++++line-height:+1.5;
++++font-family:+-apple-system,BlinkMacSystemFont,"Segoe+UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica+Neue",sans-serif;
}
.materialert{
++++position:+relative;
++++min-width:+150px;
++++padding:+15px;
++++margin-bottom:+20px;
++++margin-top:+15px;
++++border:+1px+solid+transparent;
++++border-radius:+4px;
++++transition:+all+0.1s+linear;
++++webkit-box-shadow:+0+2px+2px+0+rgba(0,0,0,0.14),+0+3px+1px+-2px+rgba(0,0,0,0.12),+0+1px+5px+0+rgba(0,0,0,0.2);
++++box-shadow:+0+2px+2px+0+rgba(0,0,0,0.14),+0+3px+1px+-2px+rgba(0,0,0,0.12),+0+1px+5px+0+rgba(0,0,0,0.2);
++++display:+-webkit-box;
++++display:+-webkit-flex;
++++display:+-ms-flexbox;
++++display:+flex;
++++-webkit-box-align:+center;
++++-webkit-align-items:+center;
++++-ms-flex-align:+center;
++++align-items:+center;
}
.materialert+.material-icons{
++++margin-right:+10px;
}
.materialert+.close-alert{
++++-webkit-appearance:+none;
++++border:+0;
++++cursor:+pointer;
++++color:+inherit;
++++background:+0+0;
++++font-size:+22px;
++++line-height:+1;
++++font-weight:+bold;
++++text-shadow:+0+1px+0+rgba(255,+255,+255,+.7);
++++filter:+alpha(opacity=40);
++++margin-bottom:+-5px;
++++position:+absolute;
++++top:+16px;
++++right:+5px;
}
.materialert.info{
++++background-color:+#039be5;
++++color:+#fff;
}
.materialert.success{
++++background-color:+#43a047;
++++color:+#fff;
}
.materialert.error{
++++background-color:+#c62828;
++++color:+#fff;
}
.materialert.danger{
++++background-color:+#c62828;
++++color:+#fff;
}
.materialert.warning{
++++background-color:+#fbc02d;
++++color:+#fff;
}|code-block|syntax|javascript|4407056|<html+lang="es-MX">
<head>
++++<meta+charset="UTF-8">
++++<link+href="css/materialert.css"+rel="stylesheet">
++++<link+href="https://fonts.googleapis.com/icon?family=Material%2BIcons"+rel="stylesheet">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1">
</head>
	<body>
		<div+class="materialert">
		++++<i+class="material-icons">check_circle</i>+<span>Bienvenido,+Linebeck</span>
		++++<button+type="button"+class="close-alert">×</button>
		</div>
		<div+class="materialert+info">
		++++<div+class="material-icons">info_outline</div>
		++++Oh!+What+a+beautiful+alert+:)
		</div>
		<div+class="materialert+error">
		++++<div+class="material-icons">error_outline</div>
		++++Oh!+What+a+beautiful+alert+:)
		</div>
		<div+class="materialert+success">
		++++<div+class="material-icons">check</div>
		++++Oh!+What+a+beautiful+alert+:)
		</div>
		<div+class="materialert+warning">
		++++<div+class="material-icons">warning</div>
		++++Oh!+What+a+beautiful+alert+:)
		</div>
	</body>
</html>|4407057|4407058|希望它能帮上忙！|4407059|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/SimiAPM/materialert^0|R|G|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|18|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>since this has no answer yet, I made something that may help you. <a href="https://github.com/SimiAPM/materialert" rel="noreferrer">Here is the repo</a></p>

<p>And here is a preview.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
    position: relative;
    min-width: 150px;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.1s linear;
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.materialert .material-icons{
    margin-right: 10px;
}
.materialert .close-alert{
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    background: 0 0;
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    filter: alpha(opacity=40);
    margin-bottom: -5px;
    position: absolute;
    top: 16px;
    right: 5px;
}
.materialert.info{
    background-color: #039be5;
    color: #fff;
}
.materialert.success{
    background-color: #43a047;
    color: #fff;
}
.materialert.error{
    background-color: #c62828;
    color: #fff;
}
.materialert.danger{
    background-color: #c62828;
    color: #fff;
}
.materialert.warning{
    background-color: #fbc02d;
    color: #fff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="es-MX"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link href="css/materialert.css" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;/head&gt;
	&lt;body&gt;
		&lt;div class="materialert"&gt;
		    &lt;i class="material-icons"&gt;check_circle&lt;/i&gt; &lt;span&gt;Bienvenido, Linebeck&lt;/span&gt;
		    &lt;button type="button" class="close-alert"&gt;×&lt;/button&gt;
		&lt;/div&gt;
		&lt;div class="materialert info"&gt;
		    &lt;div class="material-icons"&gt;info_outline&lt;/div&gt;
		    Oh! What a beautiful alert :)
		&lt;/div&gt;
		&lt;div class="materialert error"&gt;
		    &lt;div class="material-icons"&gt;error_outline&lt;/div&gt;
		    Oh! What a beautiful alert :)
		&lt;/div&gt;
		&lt;div class="materialert success"&gt;
		    &lt;div class="material-icons"&gt;check&lt;/div&gt;
		    Oh! What a beautiful alert :)
		&lt;/div&gt;
		&lt;div class="materialert warning"&gt;
		    &lt;div class="material-icons"&gt;warning&lt;/div&gt;
		    Oh! What a beautiful alert :)
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Hope it helps!</p>


blocks|key|4406919|text|我通过使用芯片(https://materializecss.com/chips.html)和格式化css样式来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4406920|https://codepen.io/krazer_spa/pen/VRmxzy|4406921|++++<div+class="container">
++++++++<div+class="flash_message">
++++++++++++<div+class="chip+chip_message_info">
++++++++++++++++This+is+an+info+message
++++++++++++++++<i+class="close+material-icons">close</i>
++++++++++++</div>
++++++++++++<div+class="chip+chip_message_warning">
++++++++++++++++This+is+a+warning+message
++++++++++++++++<i+class="close+material-icons">close</i>
++++++++++++</div>
++++++++++++<div+class="chip+chip_message_alert">
++++++++++++++++This+is+an+alert+message
++++++++++++++++<i+class="close+material-icons">close</i>
++++++++++++</div>
++++++++</div>
++++</div>

++++<style>

++++.flash_message+{
++++++++position:+fixed;
++++++++top:+70px;
++++++++z-index:+99999;
++++++++min-width:+80%25;
++++}

++++.chip_message_info,
++++.chip_message_warning,
++++.chip_message_alert+{
++++++++text-align:+center;
++++++++padding-top:+10px+!important;
++++++++padding-bottom:+10px+!important;
++++++++font-size:+20px+!important;
++++++++min-width:+80%25;
++++++++min-height:+50px;
++++}

++++.chip_message_info+{
++++++++background-color:+#bbdefb+!important;
++++}

++++.chip_message_warning+{
++++++++background-color:+#ffcc80+!important;
++++}

++++.chip_message_alert+{
++++++++background-color:+#ef9a9a+!important;
++++}

++++</style>|code-block|syntax|javascript|4406922|entityMap|0|LINK|mutability|MUTABLE|url|https://materializecss.com/chips.html|1^0|8|11|0|0|0|14|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|E]]]]

<p>I resolved this issue by using chips (<a href="https://materializecss.com/chips.html" rel="nofollow noreferrer">https://materializecss.com/chips.html</a>) and formating css style to fit the purpose.</p>

<p><a href="https://codepen.io/krazer_spa/pen/VRmxzy" rel="nofollow noreferrer">https://codepen.io/krazer_spa/pen/VRmxzy</a></p>

<pre><code>    &lt;div class="container"&gt;
        &lt;div class="flash_message"&gt;
            &lt;div class="chip chip_message_info"&gt;
                This is an info message
                &lt;i class="close material-icons"&gt;close&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="chip chip_message_warning"&gt;
                This is a warning message
                &lt;i class="close material-icons"&gt;close&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="chip chip_message_alert"&gt;
                This is an alert message
                &lt;i class="close material-icons"&gt;close&lt;/i&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;style&gt;

    .flash_message {
        position: fixed;
        top: 70px;
        z-index: 99999;
        min-width: 80%;
    }

    .chip_message_info,
    .chip_message_warning,
    .chip_message_alert {
        text-align: center;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 20px !important;
        min-width: 80%;
        min-height: 50px;
    }

    .chip_message_info {
        background-color: #bbdefb !important;
    }

    .chip_message_warning {
        background-color: #ffcc80 !important;
    }

    .chip_message_alert {
        background-color: #ef9a9a !important;
    }

    &lt;/style&gt;
</code></pre>


<p>I want to create an alert using materialize css. I don't know how. Please help. I just want to create a simple html that will display an alert error without using javascript. Thanks.</p>


Create alert using materialize css

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想使用materialize css创建一个警报。我不知道是怎么回事。请帮帮忙。我只想创建一个简单的html，它将显示一个警告错误，而不使用javascript。谢谢。

问使用materialize css创建警报
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用materialize css创建警报EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用materialize css创建警报
EN