Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to code a layout (http://lancebitner.com/Story%20580_WAGE_Yes.pdf) using Bootstrap and I am not sure if it is possible. I have limited experience with Bootstrap, but more experience with HTML and CSS. I am not sure it is possible as I have not been able to find any references for this layout. Can anyone point me in the right direction? Each page has different features and I am hoping to produce them each with Bootstrap.
Has anyone seen a site similar to this mockup, with the layout and features, that uses Bootstrap?
Any design can be done using bootstrap, its about how are you going to manipulate or edit the existing code, but for me the best part of bootstrap is the grid system, which will allow you to have a better responsive design.
probably not exactly . bootstrap is actually a grid system with a collection of markup and css rules that will make it look different a bit ( but a lot better ).
That means that some elements will look different ( buttons, form elements etc ) if you will use the default rules - But you can always override them .. but then again - why use bootstrap :-)
as a direct answer - For layout by itself ( ignoring the design ) - yes, you can.
bootstrap will also give you the advantage of device / browser compatibility that is hard to achieve coding from 0 in HTML these days .
I suggest you go to the examples page where you can see some layouts to start from - combining these will allow you to achieve the layout you need . Also pass all the elements and components ( form, table, buttons etc) that are showcased on the official page. all the elements you need are there ( and more )
In order to understand bootstrap the best way iss just to implement it .
Good day,
Yes, it's possible and judging with the pdf, you can use some free bootstrap templates here, just tweak it
https://bootswatch.com/,
http://designmodo.github.io/Flat-UI/
Cheers :)
I did some research and you guys were right, Bootstrap can do it; it just takes some custom CSS and JS. I found a Bootstrap layout with some of the features I was looking for; single column layout with a drop down menu: http://alijafarian.com/bootstrap-multi-column-dropdown-menu/ . Also, for the two column page I found this layout: http://startbootstrap.com/template-overviews/2-col-portfolio/ . These to layout will help tremendously. With some adjustments I am on my way!
http://lancebitner.com/Capture2.PNG
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have basic understanding of CSS,HTML and better of scripting languages Javascript,PHP... I am trying to dive into Bootstrap framework.
Documentation great, any problems without creating pages, everything works pretty well.
But I really hate doing something without understanding how does this work under the hood internally.
I understand that CSS3 is used with browser specific features, but I cannot leave this as it is, I want to get better understanding of bootstrap.
And how can I implement the same without using bootstrap.css.
I know the best way is just to read bootstrap.css but maybe someone has link to article or any other resource explaining how all this stuff works and how this is achieved and I can implement without bootstrap.
Thanks.
The best way is still reading the bootstrap.css file. You don't have to read it top to bottom. Pick up a sample web page made in bootstrap. See which classes are used where. Bootstrap classes are very intuitive. Most probable you'll see classes like, .row, .col-sm-4, navbar, .container, .container-fluid etc. The next step is search a particular class in bottstrap.css. E.g. searching .col- you'll see that there are 12 different classes starting from .col-sm-1 to .col-sm-12 after the media query for <= 768px. Then for other screen size you'll see other classes like .col-xs-1 to .col-xs-12 for screen sizes >= 768px and so on. They simply give 100% width to .coll-*-12 and 50% width to col-*-6 etc. You'll see clearfix classes etc. Then it will click. Whenever you'll see a new class used in page it's name would be self explaining you could foreguess what that class would do and how would that be defined in the framework.
That is the strategy I am using to learn Bootstrap. Although I feel that most of the times we need only rudimentary classes of bootstrap for responsiveness. Simple things can be done manually with custom css, like styling buttons, font-sizes etc.
Finally I'd suggest you the following article for undertanding how the .row and .col work. What the 15px padding and -15px margin doing in these things.
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
P.S: If you know how to use developer tools then looking through the DOM is actually a far better approach. You can see the css applied by each class and can also edit it to see how it makes difference.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've read a lot about this thing. Most of users suggest media queries, but I would like to know is there any specific 100% working way that allows your site to look great(elements doesn't lose they positions) even on another resolutions/browsers with just html/css. If not, what to do then?(get back to media queries?)
I don't know much about css/html, but when I tried to open my page with another pc or phone, it looked awful - (page which i designed for my PC's resolution).
I also tried 'em', '%', 'min-width' and 'min-height' but didn't go so good.
Sorry because I ask this, even there is probably an solution out there. I just wanted clear and straight answer so I don't lose my track and get confused even more.
Thanks
Media queries are the best thing to use when it comes to fluid web design. Think of media queries as custom presets you can create for each or a range of screen sizes. It is the best way to inject fluid design into your website.
The easiest way is going to be using bootstrap(http://getbootstrap.com/). This is some free open source css code that simplifies a lot of things, including what you're trying to do
EDIT: As others have said, media queries are the most common and potentially best way. Bootstrap is just a simple way of getting your site to look good on most screen sizes.
Responsive Web Design revolves around Media Queries. It's the ability to define certain resolutions to force the page to display in a specific way for that resolution. This is how a single web page can be rendered to look native to a phone, tablet, and/or PC without having to create 3 different web pages/applications.
Ideally, you wouldn't want to write this yourself. I'd recommend one of the following libraries, then build on these libraries to fit your need:
Material Design (Google Design)
Twitter Bootstrap
Foundation
Now, if you don't want to use a library or media queries, maybe this example will help. I don't recommend not using a library, nor not using media queries though.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm back-end developer starting with front-end development. I've chosen angular2 for my application and I would like to use bootstrap with it.
As far as I know, using bootstrap is just putting right html classes on right html elements.
Should I put classes directly in my template? Or maybe I should group them somehow in application-specific classes and use only them in html? (So my html file would not be bootstrap specific. But CSS doesn't allow class inheritance, so I don't know if it is even possible).
Later, if I would like to modify something(colors, size, whatever), should I modify bootstrap sources or I can just attach my .css file to the html ?
Is using less or some other css-preprocessors connected to using bootstrap? I mean, is it possible to create custom looking application with bootstrap with just vanilla css?
Should I put classes directly in my template?
Yes you should. As you mention CSS classes do not support any kind of inheritance so the concept to create an abstraction layer is not feasible. Also, If you need to switch to a different CSS framework you will need to change the HTML also.
Should I modify bootstrap sources or I can just attach my .css file to the html ?
Bootstrap provides a customizing tool to override some of its default values so you could use that. Also, you can save your configuration to a JSON file and keep it for future reference.
For additional changes you should have a new CSS file to add new styles and override existing ones.
Is using less or some other css-preprocessors connected to using bootstrap?
CSS preprocessors output regular (vanilla) CSS. So, yes, it is possible to create Bootstrap-like applications with CSS only. Preprocessors will help you to have your CSS more easily maintainable.
it is possible to "extend" bootstrap css classes, maybe not with normal css classes, but css pre-processors (like LESS, which you mentioned) have the ability to create mixins that rely on existent styles. try that out.
though, there is nothing wrong with using bootstrap classes directly
if you want your styles to work a little different then how bootstrap usually does, do not change the bootstrap sources, but override the classes with your own css (there are a few exceptions, though, but only case specific).
using css-preprocessors (such as LESS or SASS) with bootstrap is well supported, there are even some libraries/projects related to it which you can easily find (here's an example).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I am a newbie who wants to learn layout design in html.
From what I learned is that one should use DIV and css styles for this.
But while I was searching, I found about the new draft of CSS3 2D grid layout:
http://www.w3.org/TR/css3-grid-layout/
This CSS module defines a two-dimensional grid-based layout system,
optimized for user interface design
and
It excels at dividing up space for major regions of an application,
or defining the relationship in terms of size, position, and layer
between parts of a control built from HTML primitives
From looking at it and the diagrams they have there, it seems to be better for layout design.
Has anyone used this and can suggest if one should spend time to learn this new 2D grid rather than spend the time to learn using DIV for layout design purpose? Again, I am very new to HTML and trying to ask to choose the right thing to study.
add
There is also CSS Grid Template Layout Module http://dev.w3.org/csswg/css-template/
This draft combines ideas from earlier drafts on Template Layout, Grid
Positioning [CSS3GRID] and Grid Layout [CSS3-GRID-LAYOUT].
This feature is still in draft status. That means that there isn't even a finalized standard for it yet. The draft can change at any time, so it would be crazy for anyone to use it. According to caniuse.com, the only browser which supports it is Internet Explorer 10 and 11.
Until a feature is widely-adopted by all web browsers in common use you shouldn't use it. This could take years, so you should rather learn the conventional css-positioning for now.
Update: 4 years later, most browsers support grid layout, so it became a viable tool for web development. But there are still a few exceptions which might warrant putting some work into making sure that your application is at least not completely unusable without grid layout support. Also keep in mind that both grid layout and the "classic" way of div positioning are tools. Use the right tool for each job. The existence of grid layout is no excuse for refusing to learn about the other layout techniques.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I normally use table to align forms. It's good for me to keep static width for all cells in a single column. It might be a lack of my knowledge. I checked source code of some popular website to confirm that whether I'm the only one stuck with table to align forms, but found I'm not the only one. I know this doesn't means we can use tables for align forms, anyway....
Table is for representing "tabular data" I agree, is div is for "align data" ? Please tell what are the benefits of using div over table?
My favorite reason for using divs especially in forms in that it makes responsive design much easier. You get better control of your content if you need to adjust for different screen widths minus the beautiful vertical align center ability of tables. Mobile is becoming more and more important.
Another cool thing is that you can convert divs into tables using css to take advantage of table advantages when you need to eg desktop rendering. Note support for css tables isnt universal.
At the end of the day if you don't care about mobile rendering and your tables aren't nested to death its really not a big deal if you use tables. They are quick and easy to implement and no user is going to notice a difference functionally.
On the other hand it would seem that div forms can be a lot prettier.
Using a table for data which is not fit in a table is not semantic and simply bloats your code. It has a nasty habit of making really ugly code along the way.
What I usually prefer is to use the form's labels and fieldsets themselves to format and structure the forms, without even adding additional divs.
A div means a completely neutral block level element. It has no semantic meaning, which makes it good for structuring and hierarchy. But that doesn't make it a magic solution.
When designing a website, put emphasis on the data, rather than the look and feel. Things will go much smoother that way.