Geek Answers Handbook

Standard way to align normal HTML text

Is there a standardized way to separate (gray) text that should be ignored, both in HTML and bootstrap?

I tried to take a look at how Slack styles “edited” text, as well as Twitter styles (twitter.com), and it seems like they just change the font color. It just seems strange to me that an arbitrary font is selected without binding semantic information to it or even a standard shade of gray.

boot documentation mentions some semantic colors, but gray is not included in them - gray is only mentioned in shades of gray.

+4
source share
3 answers

In fact, there is a standard way to do this, in bootstrap, which should be used for use text-muted.

In fact, there is a list of standard text shades and colors that apply directly.

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

As for HTML, CSS with the class disabled and applying this to any of your texts would be the best option.

+7
source

Standard HTML input forms

An example of this is disabling HTML input elements, although there is no standard display for this browser.

http://codepen.io/anthonyastige/pen/dXNEmx

<input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>

Bootstrap Input Forms

There is also a concept of disabling input elements here with a class .disabled

https://getbootstrap.com/css/#checkboxes-and-radios

.text-muted , , .

https://getbootstrap.com/css/#helper-classes

+2

. :

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


<fieldset disabled>
  <div class="form-group">
    <label for="inputText">Disabled input</label>
    <input class="form-control" id="inputText" type="text" placeholder="Disabled Input" disabled>
    <p class="help-block">Example block-level help-block class text here.</p>
    <p class="text-muted">Example block-level with text-muted class.</p>
  </div>
  <div class="form-group">
    <label for="optionSelect">Disabled select menu</label>
    <select id="optionSelect" class="form-control">
      <option>Select Value</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">Disabled Checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>
Hide result
+2

More articles:


All Articles