![]() To make it more straightforward, it uses a syntax similat to bootstrap 3.3.7 and to avoid conflicts all classes are prefixed with app-*.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Split Navigation Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header The react-responsive-widget module is a simple ReactJs component, available on npm that allows your components to be organised depending on their container size. It might be easy to fix that page, but as a developper, I would like another solution to create component that will adapt to the space they have rather than a screen resolution. In that case, the mobile layout would fit perfectly but it wont be used unless the width is less than 768px. isn't it ? The problem is due to the fact that bootstrap provides only 1 layout for a given screen resolution, no matter what the width of your component if. col-md-12), our ReactJs component will looks like this (to make react syntax easier, we are using jsx) :įor now, everithing works fine, but what would happen if someone decide to use our widget in a sidebar ? col-xs-12) and to be on 3 columns on desktop (. Let's say we have 3 blocks and we want them to use the full page width on mobile (. To use this system, we only have to add the right class to selected html component. lg for large screen (desktop) resolution greater than 1200px (default).md for medium screens (desktop) resolution between 992px and 1200px (default).sm for small screens(tablette) resolution between 768px and 992px (default).xs for really small screens (mobiles) resolution less than 768px (default). ![]() There are 4 different configuration that can be setted : To make the layout change depending on the screen resolution, bootstrap uses media query ranges. ![]() A component width will then be defined by the number of column ( col-*) it will occupy on a scale from 1 to 12.Īs an exemple, a col-12 will fit the full page width while a col-6 element will take only half of it. This system is based on a 12 columns grid that allows you to define the witdh an element should have. Bootstrap is a commonly used framework that comes with a grid system used to create responsive, mobile first web pages.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |