Homepage – Notizen

Zentrale Dokumente für die Migration sind hier zu finden:

Der Text kommt von hier: https://nodebb.org/blog/nodebb-specific-bootstrap-3-to-5-migration-guide/

Grundsätzliches

pull-left changed to float-start
pull-right changed to float-end
text-right changed to text-end
img-responsive changed to img-fluid

Buttons

Vertically stacked buttons change from .btn-block to using display/spacer classes.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button> 
</div>

btn-xs removed use btn-sm
btn-default removed use btn-outline-secondary

Grid/Breakpoints

col-xs-<n> changed to col-<n>
col-md-offset-<n> changed to offset-md-<n>

Display

inline-block changed to d-inline-block

Media Component

… has been removed completely, use flex display classes instead:

<div class="d-flex">
  <div class="flex-shrink-0">
    image
  </div>
  <div class="flex-grow-1 ms-3">
    text
  </div>
</div>

Navbar

navbar-toggle changed to navbar-toggler

Panels, Wells, and Jumbotrons

… have all been removed in favour of the “card” component.

To convert a panel into a card:

<div class=”card”>
  <div class=”card-header”>header</div>
  <div class=”card-body”>body</div>
  <div class=”card-footer”>footer</div>
</div>

<div class="well"> changed to <div class="card card-body text-bg-light">

Forms

<select class="form-control"> changed to <select class="form-select">
Add form-label class to labels
Add form-check-input to checkboxes. Sample checkbox with label:

<div class="”form-check”">
  <input class="”form-check-input”" type="”checkbox”" />
  <label class="”form-check-label”">a checkbox</label>
</div>

form-group, .form-row, or .form-inline are removed use spacing utilities
help-block changed to form-text

Dropdowns

data-toggle="dropdown" changed to data-bs-toggle="dropdown"
Add dropdown-item to dropdown list item <a class="dropdown-item">Item 1</a>
dropdown-menu-right changed to dropdown-menu-end
Divider changed to dropdown-divider

Collapse

data-toggle="collapse" changed to data-bs-toggle="collapse"
data-target=".classname" changed to data-bs-target=".classname"

Modals

data-dismiss="modal" changed to data-bs-dismiss="modal"

Responsive Breakpoints

Instead of using media queries using old Bootstrap 3 variables (e.g. @media (max-width: @screen-sm-max) { ... }), Bootstrap 5 introduces a new mixin for breakpoints.

Read more about it in Bootstrap 5’s article re: responsive breakpoints.

INSERT INTO `wp_blogs` (`blog_id`, `site_id`, `domain`, `path`, `registered`, `last_updated`, `public`, `archived`, `mature`, `spam`, `deleted`, `lang_id`) VALUES (6, 1, 'dev.physio-vohrer.de', '/', '2013-09-30 20:45:51', '2015-06-26 10:02:38', 1, 0, 0, 0, 0, 0); -- -------------------------------------------------------- INSERT INTO `wp_domain_mapping` (`id`, `blog_id`, `domain`, `active`) VALUES (15, 6, 'dev.physio-vohrer.de', 1), (16, 6, 'dev-vohrer.rj-server.de', 0); -- -------------------------------------------------------- INSERT INTO `wp_usermeta` (`umeta_id`, `user_id`, `meta_key`, `meta_value`) VALUES (190, 1, 'wp_6_dashboard_quick_press_last_post_id', '816'), (191, 1, 'wp_6_user-settings', 'm1=c&m4=c&m9=c&m5=o&m11=c&m10=c&m13=c&m14=c&imgsize=thumbnail&m6=c&editor=tinymce&m7=c&m8=c&m2=c&m0=o&widgets_access=off&libraryContent=browse&align=right&urlbutton=none&wplink=1&ed_size=859&hidetb=1&advImgDetails=hide'), (192, 1, 'wp_6_user-settings-time', '1413395722'), (193, 9, 'wp_6_capabilities', 'a:1:{s:6:"editor";b:1;}'), (194, 9, 'wp_6_user-settings', 'libraryContent=browse&editor=html'), (195, 9, 'wp_6_user-settings-time', '1427109475'), (196, 9, 'wp_6_user_level', '7'), (197, 9, 'wp_6_dashboard_quick_press_last_post_id', '850'), (198, 10, 'wp_6_capabilities', 'a:1:{s:6:"editor";b:1;}'), (199, 10, 'wp_6_user_level', '7'), (200, 13, 'wp_6_capabilities', 'a:1:{s:13:"administrator";b:1;}'), (201, 13, 'wp_6_user-settings', 'editor=tinymce'), (202, 13, 'wp_6_user-settings-time', '1435310178'), (203, 13, 'wp_6_user_level', '10'), (204, 13, 'wp_6_dashboard_quick_press_last_post_id', '851');

Kategorie: Homepage

Migration von Bootstrap 3 auf 5