When I am learning Bootstrap, I saw a class "barone" in a tutorial, but they didn't explained the use of that class. This is the site
http://www.w3resource.com/twitter-bootstrap/tutorial.php
Is there any class in Bootstrap in this name?
Thanks
From what I know, classes are used to group elements together. As you can see in the following example:
p.exampleID3 { background-color: #013370; color: white;}
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we used classes because we wanted to reuse our styling!</p>
The class is exampleID3 and is present in the css file. In your case "row barone" should be somewhere in the css file, but it's not shown in the tutorial and you don't really know what it contains.
Related
I want to a certain span of text to have both strike-throughs and underlines. This is possible in vanilla CSS like:
text-decoration-line: underline line-through;
I assumed with tailwind it would work similarly if I used the class like
class="underline line-through"
but it does not work. Only one of the styles apply at a time. Is there any way to get that behaviour with tailwind classes?
Right now those utilities are not composable, you can either create your own plugin, or use arbitrary properties to achieve the result you want:
<div class="[text-decoration:underline_line-through]">hello</div>
Here is a quick playground link with the solution: https://play.tailwindcss.com/baW2CzoBur
Sorry if this is a noob question, but I would like to know if there is a way to make custom tags linked to CSS entries (sorry if this the wrong terminology).
Like the h1, h2 tags but with a name I choose. So that I can apply these custom tags around text and modify it without doing inline styling for every instance or styling a whole div the same. So for example:
<customTag> This makes the text look like what 'customTag' is described in styles.css </customTag>
Is this possible? If so how can I do it?
Thank you.
In a HTML element you can provide the class="YourClassName" attribute to create a custom class that you can access in CSS.
Example:
In your html file you would write something like:
<p class="maintext">Hello World!</p>
And access the class in css like this:
.maintext {
color: #fff;
}
You could then add the class="maintext" attribute to any HTML element you'd like to have the same styling.
See this page for more information about HTML classes.
I'm building a plugin, which is used by many online stores. When the user uses my plugin, he can generate a template (sample like this) in his store. Each store will use its own theme.
Now the question comes. Some themes are using a .page-width class to determine the container width. Some are using .wrapper class and .page-width is not available in the css file. I believe that .page-width is widely used than .wrapper in general.
How can I set the class for my container? If I just use <div class='page-width wrapper'> and the theme has 2 classes, will the wrapper class break the layout? Or I should use my own definition of .page-width class to override the original?
Since there are more than a hundred themes. I don't know how to best fit different themes.
One possibility that you can use is setting the style also for the "collision" elements
.page-width, .page-width.wrapper {
width: 500px;
}
For elements with class page-width, it will get applied (of course).
For elements with both classes, the selector has higher priority (2 classes) than a selector with only .wrapper, and will be also applied.
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}
I'm wanting to use properties from other css classes without having to rewrite the code...I'm not too savvy with css so please forgive me for the simple question.
Is it possible to do something like this or similar to it in css?
.class_a {
background:red;
}
.class_b{
.class_a;
}
The best way (that I know of) to re-use css classes is to decide on the css attributes you want to re-use, and put this in a seperate class, like so:
.class_a {
background:red;
}
Then, every time you want to re-use these attributes, you add the class to the html element, with spaces in between different class names, like so:
<div class="text class_a">This will be red, and have the properties of the text class</div>
<div class="text">This will only have the properties of the text class</div>
You can use the same property list for more than one selector:
.class_a, .class_b {
background:red;
}
There are CSS tools which allow you to code in the way you describe. You just do some post-processing of your code to produce valid CSS.
Check out LESS.
Not possible using CSS. However, you can achieve this using something like Sass. Sass allows you write CSS with enhancements such as the one you described. Unfortunately, this introduces an extra step since Sass files must be converted to CSS before you can use them on your page. Could help save you a lot of typing though :)