Поиск | Удалить
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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |