Поиск | Удалить

Опубликовано: 5 Января, 2022

Bulma - это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox. Он богат на компоненты, совместим и хорошо документирован. Он очень отзывчивый по своей природе. Он использует классы для реализации своего дизайна.
delete - это элемент, который можно использовать в другом контексте. Это ссылка или кнопка, которая используется для открытия страницы, окна или модели на странице. Некоторый код JavaScript запускается, когда кто-то нажимает эту кнопку удаления, и этот код JavaScript приводит к появлению этой модели (Bulma - это чистый CSS-фреймворк, он отвечает только за часть проектирования).
Пример 1: В этом примере создаются разные размеры для удаления опции элемента.

html

<!DOCTYPE html>
< html >
< head >
< title >Bulma Delete</ title >
< link rel = 'stylesheet' href =
<!-- custom css -->
< style >
div.columns {
margin-top: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
</ style >
</ head >
< body >
< div class = 'container' >
< div >
< h1 class = 'title has-text-centered' >
Delete Elements
</ h1 >
</ div >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-5' >
< div class = 'custom' >
< strong >Small : </ strong >
< a class = "delete is-small" ></ a >
</ div >
< div class = 'custom' >
< strong >Default : </ strong >
< a class = "delete" ></ a >
</ div >
< div class = 'custom' >
< strong >Medium : </ strong >
< a class = "delete is-medium" ></ a >
</ div >
< div class = 'custom' >
< strong >Large : </ strong >
< a class = "delete is-large" ></ a >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

Выход:

Пример 2: В этом примере создается элемент удаления с цветом фона.

html

<!DOCTYPE html>
< html >
< head >
< title >Bulma Delete</ title >
< link rel = 'stylesheet' href =
<!-- custom css -->
< style >
div.columns {
margin-top: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
</ style >
</ head >
< body >
< div class = 'container' >
< div >
< h1 class = 'title has-text-centered' >
Delete Elements
</ h1 >
</ div >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-5' >
< div class = 'custom' >
< strong >Small : </ strong >
< a class="delete is-small
has-background-danger"></ a >
</ div >
< div class = 'custom' >
< strong >Default : </ strong >
< a class="delete
has-background-danger"></ a >
</ div >
< div class = 'custom' >
< strong >Medium : </ strong >
< a class="delete is-medium
has-background-danger"></ a >
</ div >
< div class = 'custom' >
< strong >Large : </ strong >
< a class="delete is-large
has-background-danger"></ a >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

Выход:

Пример 3:

html

< html >
< head >
< title >Bulma Delete</ title >
< link rel = 'stylesheet' href =
<!-- custom css -->
< style >
div.columns {
margin-top: 80px;
}
h1 {
margin-top: 10px;
margin-bottom: 20px;
}
div.columns {
margin-top: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
p {
font-size: 20px;
font-family: calibri;
text-align: left;
}
p button.delete {
float: right;
margin-top: 5px;
}
span {
font-size: 25px;
font-family: calibri;
}
#chellange {
font-size: 25px;
font-family: calibri;
}
</ style >
</ head >
< body >
< div class = 'container' >
< div class='columns
is-mobile is-centered'>
<!-- Start of DO -->
< div class = 'column is-5' >
< div >
< h1 class = 'title has-text-centered'
style = 'color:green' >TODO</ h1 >
</ div >
< div class = 'notification is-success' >
< button class = "delete" ></ button >
< div class = 'list' >
< div class = 'list-item' >
< p >
Explore yourself in a
particular language.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Refer API documentation
for new things.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Dont follow DRY principle.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
write comments while coding.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Keep your code clean
as possible.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Use inline css styling.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Create your own projects.
< button class="delete
has-background-success">
</ button >
</ p >
</ div >
</ div >
</ div >
</ div >
<!-- Start of DONT -->
< div class = 'column is-5 ' >
< div >
< h1 class = 'title has-text-centered'
style = 'color:red' >TODONT</ h1 >
</ div >
< div class = 'notification is-danger' >
< button class = "delete" ></ button >
< div class = 'list' >
< div class = 'list-item' >
< p >
Use Nesting loops as possible.
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Use Promises in place
of callbacks.
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Learn to code in isolation
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Use online Platforms to
practice.
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Don't follow KISS
principle of coding.
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
works on others project.
< button class="delete
has-background-danger">
</ button >
</ p >
</ div >
< div class = 'list-item' >
< p >
Always go for
premature-optimization.
< button class=&quo