logo
  1. Главная страница
  2. Презентации
  3. Информатика и ИТ
  4. Codecraft Bootstrap

Codecraft Bootstrap

Загружено в:

02.08.2023

Скачано:

0

Размер:

725.1865234375 KB
Скачать
Codecraf t Bootstra p Сообщения .alert • < div class =&#34;alert alert-***&#34; > текст сообщения </ div > Классы: alert-success alert-info alert-warning alert-danger < div class = &#34; alert &#34; > текст сообщения </ div >Класс .alert < div class = &#34; alert &#34; > текст сообщения </ div > Сообщения .alert со ссылкой • Класс .alert-link • < div class =&#34;alert alert-success&#34; > • текст < a href= &#34;#&#34; class= &#34;alert- link&#34; > сообщения </ a > • </ div > Закрытие сообщений • < a href= &#34;#&#34; class= “close&#34; data- dismiss= “alert” aria-label= “close” > x </ a > < div class = &#34; alert alert-success alert-dismissable &#34; > < a href= &#34;#&#34; class= “ close &#34; data-dismiss= “alert” aria- label= “close” > x </ a > текст < a href= &#34;#&#34; class= &#34; alert-link &#34; > сообщения </ a > </ div > Анимированные сообщения • Классы .fade .in < div class = &#34; alert alert-success fade in &#34; > ... </ div > Bootstrap buttons - кнопки • .btn-default • .btn-primary • .btn-success • .btn-info • .btn-warning • .btn-danger • .btn-link Пример: < button type= &#34;button&#34; class= &#34;btn btn-default&#34; > Default</ button > Можно использовать < a > , < button > , или < input > Bootstrap buttons - кнопки • Размеры: .btn-lg • .btn-md • .btn-sm • .btn-xs Пример: < button  type =&#34;button&#34;  class =&#34;btn btn-primary btn-lg&#34;> Large < /button > Bootstrap buttons - кнопки • Класс .btn-block Активные/Не активные кнопки • Классы .active • .disabled < button  type =&#34;button&#34;  class =&#34;btn btn-primary active&#34;> Active Primary < /button > < button  type =&#34;button&#34;  class =&#34;btn btn-primary disabled&#34;> Disabled Primary < / button > Группировка кнопок • Класс .btn- group < div  class =&#34;btn-group&#34;>    < button  type =&#34;button&#34;  class =&#34;btn btn-danger&#34;> Apple < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-primary&#34;> Samsung < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-success&#34;> Sony < /button > < /div > Вертикальная группировка кнопок • Класс .btn-group- vertical < div  class =&#34;btn-group-vertical&#34;>    < button  type =&#34;button&#34;  class =&#34;btn btn-danger&#34;> Apple < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-primary&#34;> Samsung < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-success&#34;> Sony < /button > < /div > Группы кнопок, выровненной по ширине • Класс .btn-group- justified <div class=&#34;btn-group btn-group-justified&#34;>    <a href=&#34;#&#34; class=&#34;btn btn-danger&#34;>Apple</a>   <a href=&#34;#&#34; class=&#34;btn btn-primary&#34;>Samsung</a>   <a href=&#34;#&#34; class=&#34;btn btn-success&#34;>Sony</a> </div> • <div class=&#34;btn-group btn-group-justified&#34;>   <div class=&#34;btn-group&#34;>     <button type=&#34;button&#34; class=&#34;btn btn- primary&#34;>Apple</button>   </div>   <div class=&#34;btn-group&#34;>     <button type=&#34;button&#34; class=&#34;btn btn- primary&#34;>Samsung</button>   </div>   <div class=&#34;btn-group&#34;>     <button type=&#34;button&#34; class=&#34;btn btn- primary&#34;>Sony</button>   </div> </div> Вложенные группы кнопок & Выпадающие меню Вложенные группы кнопок & Выпадающие меню < div  class =&#34;btn-group&#34;>    < button  type =&#34;button&#34;  class =&#34;btn btn-danger&#34;> Apple < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-primary&#34;> Samsung < /button >    < div  class =&#34;btn-group&#34;>         < button  type =&#34;button&#34;  class =&#34;btn btn-success dropdown-toggle&#34; data-toggle =&#34;dropdown&#34;>     Sony  < span  class =&#34;caret&#34;>< /span >< /button >   < ul  class =&#34;dropdown-menu&#34;  role =&#34;menu&#34;>        < li >< a  href =&#34;#&#34;> Tablet < /a >< /li >        < li >< a  href =&#34;#&#34;> Smartphone < /a >< /li >      < /ul >    < /div > < /div > Разделённые выпадающие меню Разделённые выпадающие меню < div  class =&#34;btn-group&#34;>    < button  type =&#34;button&#34;  class =&#34;btn btn-primary&#34;> Sony < /button >    < button  type =&#34;button&#34;  class =&#34;btn btn-primary dropdown-toggle&#34;  data- toggle =&#34;dropdown&#34;>      < span  class =&#34;caret&#34;>< /span >    < /button >    < ul  class =&#34;dropdown-menu&#34;  role =&#34;menu&#34;>      < li >< a  href =&#34;#&#34;> Tablet < /a >< /li >      < li >< a  href =&#34;#&#34;> Smartphone < /a >< /li >    < /ul > < /div > Иконки Glyphicons • Более 260 иконок... http://getbootstrap.com/components/ Как добавить иконку: < span  class =&#34;glyphicon glyphicon- имя &#34;>< /span > Домашнее Задание      

Похожие

Gipermatn hujjat yaratuvchi dasturlarning qiyosiy tahlili (CSS, HTML, Bootstrap)
Shaxsiy kompyuterning dasturiy ta'minoti
Turli sanoq sistemalari va ularning ishlash asoslari
Paskalda dasturlash tili
Turli sanoq sistemalari tarixda qo`llanishi va ularning asoslari