Learn Bootstrap

http://getbootstrap.com/

I need to learn this.

I am not so happy with Bootstrap.  Here are 2 files trying to do the same thing.  Neither works.

bs1.html
bs2.html

How exactly do you want the page to look?

The breadcrumbs on the left, something on the right, and the H1 heading centered under them.  I wouldn't mind some decent styling.  But I don't want any CSS or JavaScript.

Each horizontal section (header, middle, footer) can be in its own container div.
bs.html

Is this what you want?

Yes but I don't understand the logic behind this.  Why do they each need their own container?

Floating elements get mixed with things that don't float. The breadcrumbs and the "right" section of your page are floating elements (they have "pull-left" and "pull-right" classes, which set the "float" css property left/right). So your H1 title was mixed with those floating elements and this was causing the bad layout. Bootstrap containers provide a clean separation between the sections, so elements in different containers never get mixed.

Thanks, now can you do this in a navbar?  And can you explain what a navbar really is?

From here:

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

In other words, a navbar is a bar on the top used for navigation. It may include links, dropdowns and even inputs (e.g., search). If you make the window very narrow, it will adjust and move the elements into a dropdown (it uses the hamburger icon, I know you don't like it, but you can replace it if needed).

fschmidt wrote

Thanks, now can you do this in a navbar?

What exactly do you want to put in the navbar? They have a section about component alignment here:
http://getbootstrap.com/components/#navbar-component-alignment

Hugo <Nabble> wrote

What exactly do you want to put in the navbar? They have a section about component alignment here:
http://getbootstrap.com/components/#navbar-component-alignment

The link doesn't work.  I guess that helps make it modern, the fact that links don't work.

I hate Bootstrap, but I hate the alternatives even more.  I looked at at least 10 other similar systems.  This isn't urgent, but let's discuss this.  For now, I am disgusted with modern HTML and I will take a break from it.

I thought more about Bootstrap last night and now I really hate it.  It is pure modern culture.  I feel about it like this:



The original HTML idea made sense.  Everything developed after that was garbage.  What should have happened is that a lower level rendering system should have been developed.  Browsers should have supported a standard virtual machine with a standard rendering API.  This would have allowed programs written in any language render or interact with HTML.

This will never happen because modern culture is insane.  But all the garbage that has been developed (Javascript, CSS, etc.) adds up to a rendering system.  The idea of a Markup Language has been lost.  But there is no reason why one can't take old HTML which still exists and fill in the gaps to make a usable version of HTML for Luan users.  Luan users should never see CSS or Javascript, never see div or span tags, never see class or id attributes, and never see whatever other garbage that I don't know about that has been added to HTML.  Let's discuss this.

We discussed this. This is a complex phenomenon that is not only affected by modern culture. The are many variables and it is hard to think of a solution that would have worked smoothly.

We can certainly look into a technology that makes HTML simpler and more elegant. We both agree that we won't be able to do everything browsers support, but it would be great for people who wants simplicity.

ok, back to you to think about when you have time

I would like to discuss this again.  I realize now that all these projects depend on saving HTML from modern culture:

- Luan Forums
- LuanHost
- Love Over Borders

We discussed this. Soon I will try to implement simple tags like "breadcrumbs" and "menu". I will keep this assigned to myself.

I found a good article about custom HTML tags in HTML5, but Internet Explorer doesn't support this.
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

So I am looking for alternatives now.

Franklin, please check the source of this page:
http://hugo.s1.luanhost.com/custom.html

What do you think?

I prefer this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

		<!-- Custom Code -->
		<script src="/custom.js"></script>
	</head>
	<body>
		<breadcrumbs>
			<li><a href="/home">Home</a></li>
			<li><a href="/library">Library</a></li>
			<li><a href="/data">Data</a></li>
		</breadcrumbs>

		<center><h1>Testing Custom Tags</h1></center>

		<dropdown>
			Dropdown
			<li><a href="http://www.nabble.com/">Nabble</a></li>
			<li><a href="http://www.cnn.com/">CNN</a></li>
			<li><a href="http://www.yahoo.com/">Yahoo!</a></li>
		</dropdown>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	</body>
</html>

I don't understand the need for the div tag.  The breadcrumbs separator should default.  You can allow an override parameter, but I wouldn't use it.  All items should be in "li" tags.  This makes it clear and explicit and allows me to put whatever I want there, not just links.  I am not sure how centering should work, but certainly not with a class.  I think the dropdown text should just be the text in the dropdown tag that isn't part of an item.

fschmidt wrote

I don't understand the need for the div tag.

Okay, this I can understand.

fschmidt wrote

You can allow an override parameter, but I wouldn't use it.

The separator attribute is optional at this point. The default is "/", but I wanted to display something else as an example.

fschmidt wrote

All items should be in "li" tags.  This makes it clear and explicit and allows me to put whatever I want there, not just links.

I don't agree because this is bad HTML. <li> tags must have a <ul> or <ol> parent and your suggestion breaks this rule (even if the javascript will fix it). It is better to have consistent HTML.

fschmidt wrote

I am not sure how centering should work, but certainly not with a class.

Why not a class? Adding a class attribute isn't much work and it is an old concept.

fschmidt wrote

I think the dropdown text should just be the text in the dropdown tag that isn't part of an item.

This is fine, but will make the javascript code (that builds the dropdown) more complex. For example, we could have this:

<dropdown>
	Dropdown
	<a href="http://www.nabble.com/">Nabble</a>
	Some text
	<a href="http://www.cnn.com/">CNN</a>
	More text
	<a href="http://www.yahoo.com/">Yahoo!</a>
</dropdown>

Then the dropdown should be "Dropdown Some text More text". Reading an attribute is easier than parsing the children.

Hugo <Nabble> wrote

fschmidt wrote

All items should be in "li" tags.  This makes it clear and explicit and allows me to put whatever I want there, not just links.

I don't agree because this is bad HTML. <li> tags must have a <ul> or <ol> parent and your suggestion breaks this rule (even if the javascript will fix it). It is better to have consistent HTML.

You can add another tag like "item".  The main point is that each item should be enclosed in tags.  Another example is the "option" tag inside a "select".

fschmidt wrote

I am not sure how centering should work, but certainly not with a class.

Why not a class? Adding a class attribute isn't much work and it is an old concept.

The class tag is ugly and should be restricted to classes that the user defines himself if he wants CSS.  To me "center" is like "b" or "i".

This is fine, but will make the javascript code (that builds the dropdown) more complex. For example, we could have this:

<dropdown>
	Dropdown
	<a href="http://www.nabble.com/">Nabble</a>
	Some text
	<a href="http://www.cnn.com/">CNN</a>
	More text
	<a href="http://www.yahoo.com/">Yahoo!</a>
</dropdown>

Then the dropdown should be "Dropdown Some text More text". Reading an attribute is easier than parsing the children.

I can't think of any example of static text being defined as an attribute in HTML.  Can you?