한 번의 트릭으로 부트스트랩 경고 상자 얻기

경고 상자는 사용자에게 피드백 콘텐츠와 팁을 제공하기 위해 사전 정의된 정보를 유연하게 제공할 수 있습니다. 오늘은 참고할만한 가치가 있는 부트스트랩 경고 상자를 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Alert box

경고 상자를 사용하려면 텍스트와 선택적인 버튼을 함께 넣어서 .alert를 설정해야 합니다. 선택할 수 있는 다른 클래스가 있습니다. 현재 성공, 메시지, 경고 또는 위험을 제공합니다. .alert，还有其他的类可供选择。目前提供了成功、消息、警告或危险。

<div class="alert alert-success" role="alert">成功</div>
    <div class="alert alert-info" role="alert">你有一条新消息</div>
    <div class="alert alert-warning" role="alert">警告！！！</div>
    <div class="alert alert-danger" role="alert">本次操作危险，是否继续？</div>

可关闭警告框

在警告框中加入.alert-dismissible 类和一个关闭按钮，则成为一个可以关闭的警告框。为了保证该操作可行，需要给 <button> </button>元素添加 data-dismiss="alert" 属性。

<div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>警告!</strong> 本次操作有风险，是否继续？
</div>

警告中的链接

.alert-link

 <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">成功</a>
      </div>
      <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">你有一条新消息</a>
      </div>
      <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">警告！！！</a>
      </div>
      <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">本次操作危险，是否继续？</a>
    </div>

경고 상자 닫기

.alert-dismissible 클래스를 추가하고 경고 상자에 닫기 버튼을 추가하여 닫을 수 있도록 만듭니다. 경고 상자. 이 작업이 가능하도록 하려면 <button> 요소에 <code> data-dismiss="alert" 속성을 ​​추가해야 합니다.
rrreee

🎜🎜🎜link in Alert🎜🎜🎜🎜.alert-link 는 링크에 대한 현재 경고 상자와 동일한 색상을 설정할 수 있습니다. 🎜rrreee🎜 이번에는 보여드리지 않겠습니다. 사진으로는 보이지 않으니 직접 연습해 보시는 게 좋을 것 같아요. 🎜🎜🎜추천 학습: 🎜Bootstrap 비디오 튜토리얼🎜🎜🎜

위 내용은 한 번의 트릭으로 부트스트랩 경고 상자 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!