can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
Related
I'm testing since severals month angular + ionic, and I used a lot the <ion-grid>. But since I'm doing an application that will be available on desktop AND on mobiles, sometimes I need VERY different layouts, and I find hard to achieve this sometime with the flexbox approach of the ion-grid component.
Is there a way to use instead the CSS Grid(https://css-tricks.com/snippets/css/complete-guide-grid/ ) inside of ionic? It would make some layout much easier.
Is this somehow supported directly by Ionic? Or does this require me to directly make it in CSS? What would be the downside of it not directly supported by Ionic?
In ionic there is nothing that force you to use only ionic elements, the point of using these elements is to make it easier for users for faster work.
So instead of using bootstrap to make a grid layout for example :
<div class="blabla">
<div class="row">
<div class="col-6 col-sm-12 ..."></div>
</div>
</div>
So ion-grid or ion-row or ion-col are just for faster use for a user, but if it comes for better performance between default elements in ionic and bootstrap, for sure it will be better in ionic elements, but if you can achieve your things without using library of bootstrap and just use css, then it will not differ at all since css is a part of ionic and not you who is adding the css file, so its very normal to use css and html normal elements like div to achieve tour results without ionic elemwnts.
I'm currently working on a Django project and I'm facing a bit of headache. I need to "convert" an HTML page (form) to a proper functioning Django Form App. The problem comes exactly in the ChoiceField (the two choices Manhã and Tarde). On the left, it's the Django Form HTML output and on the right, there's the original HTML page. The styling is different and I can't figure out how I can make them equal. Also, I wanted to make them horizontally aligned, but Django it's not so flexible as I thought in this matter.
I hope you can give me clear tips and light in this strange darkness, I have a couple of frontend skills but nothing above the average.
You could you use something like bootstrap.
Put both choices in a row (read bootstrap grid documentation). Also, could use bootstrap styling to change the appearance of choice field.
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
Could also use Django Crispy forms, there's tutorials online on how to use it.
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
There is a layout style that has been widely used the last couple of years or so, the one with a full-width image near the top, a discreet menu above the image, and some form of content below the image.
Is this layout style called something?
A few examples:
https://www.airbnb.com
https://www.wannafind.dk
https://www.code42.com/crashplan
https://www.wannafind.dk
http://www.e-boks.dk
I don't know the name of the layout, but it's a very common theme for Bootstrappers: http://startbootstrap.com/template-categories/all/ You have themes like: Creative, Clean Blog, Agency, Freelancer, GrayScale, Landing page +++
I guess the amount of existing themes with that exact layout can be the reason why "everyone" uses it!
Also there's a lot of different templates that is built the same way.
I want to implement a Dashboard-style navigation in a mobile web application using jQuery Mobile: http://mobile-patterns.com/dashboard-navigation
Are there any useful templates or good approaches to do so? Of course, I could build a grid-based content page, containing the icons and links. But thanks to the popularity of dashboard navigations, I'm looking forward for an easier solution.
Thanks in advance
This article talks about making custom icons for use in jquery mobile. I would follow that for creating my icons, and then refer to jqmobile's navbar documentation for instructions on how to build a 3 x 3 column list:
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Then further down in that same article is a, Using 3rd party icon sets section that will explain how to add in your icons. Since you won't want the default box behind your icons, you could add another css class to your container div where you can override jquerymobile's "navbar" class and hide the box:
<div data-role="navbar hidebox">
Note: When I'm working with jquery mobile, I import my own custom stylesheet after the jquerymobile css import. This lets me override classes that jquery mobile injects in to my code. This is where I'd override 'hidebox' class.
Also, this may help with building a 3 x 3 squared grid, since this developer was doing something similar (I know, the developer is using Sencha Touch but the discussions around it may help).