Βάση CSS

Πάνω από τα ικριώματα, βασικά στοιχεία HTML είναι διαμορφωμένα και βελτιωμένα με επεκτάσιμες κλάσεις για να παρέχουν μια φρέσκια, συνεπή εμφάνιση και αίσθηση.

Επικεφαλίδες & αντίγραφο σώματος

Τυπογραφική κλίμακα

Ολόκληρο το τυπογραφικό πλέγμα βασίζεται σε δύο μεταβλητές Less στο αρχείο μας variables.less: @baseFontSizeκαι @baseLineHeight. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης.

Χρησιμοποιούμε αυτές τις μεταβλητές, και μερικά μαθηματικά, για να δημιουργήσουμε τα περιθώρια, τα paddings και τα ύψη γραμμής όλων των τύπων μας και πολλά άλλα.

Παράδειγμα κειμένου σώματος

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Επικεφαλίδα 1

h2. Επικεφαλίδα 2

h3. Επικεφαλίδα 3

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5

h6. Κεφάλαιο 6

Έμφαση, διεύθυνση και συντομογραφία

Στοιχείο	Χρήση	Προαιρετικός
`<strong>`	Για την έμφαση σε ένα απόσπασμα κειμένου με σημαντικά	Κανένας
`<em>`	Για να τονίσετε ένα απόσπασμα κειμένου με άγχος	Κανένας
`<abbr>`	Αναδιπλώνει τις συντομογραφίες και τα ακρωνύμια για να εμφανίζει την εκτεταμένη έκδοση στον δείκτη του ποντικιού	Συμπεριλάβετε προαιρετικό `title`για διευρυμένο κείμενο
`<address>`	Για στοιχεία επικοινωνίας για τον πλησιέστερο πρόγονό του ή ολόκληρο το έργο	Διατηρήστε τη μορφοποίηση τερματίζοντας όλες τις γραμμές με`<br>`

Χρησιμοποιώντας έμφαση

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, μια pharetra augue.

Σημείωση: Μη διστάσετε να χρησιμοποιήσετε <b>και <i>σε HTML5, αλλά η χρήση τους έχει αλλάξει λίγο. <b>προορίζεται για την επισήμανση λέξεων ή φράσεων χωρίς να αποδίδει πρόσθετη σημασία, ενώ <i>είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

Παραδείγματα διευθύνσεων

Ακολουθούν δύο παραδείγματα για το πώς <address>μπορεί να χρησιμοποιηθεί η ετικέτα:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Ονοματεπώνυμο
[email protected]

Παραδείγματα συντομογραφιών

Οι συντομογραφίες έχουν στυλ με κεφαλαία γράμματα και ανοιχτόχρωμο διάστικτο κάτω περίγραμμα. Έχουν επίσης έναν κέρσορα βοήθειας στο δείκτη του ποντικιού, ώστε οι χρήστες να έχουν επιπλέον ένδειξη ότι κάτι θα εμφανίζεται κατά την τοποθέτηση.

Η HTML είναι το καλύτερο πράγμα από το ψωμί σε φέτες.

Μια συντομογραφία της λέξης χαρακτηριστικό είναι attr .

Μπλοκ εισαγωγικά

Στοιχείο	Χρήση	Προαιρετικός
`<blockquote>`	Στοιχείο σε επίπεδο μπλοκ για την παράθεση περιεχομένου από άλλη πηγή	Προσθήκη `cite`χαρακτηριστικού για τη διεύθυνση URL πηγής Χρήση `.pull-left`και `.pull-right`κλάσεις για αιωρούμενες επιλογές
`<small>`	Προαιρετικό στοιχείο για την προσθήκη μιας αναφοράς που απευθύνεται στον χρήστη, συνήθως ένας συγγραφέας με τίτλο εργασίας	Τοποθετήστε το `<cite>`γύρω από τον τίτλο ή το όνομα της πηγής

Για να συμπεριλάβετε ένα blockquote, τυλίξτε <blockquote>οποιοδήποτε HTML ως απόσπασμα. Για ευθείες εισαγωγικές προτείνουμε ένα <p>.

Συμπεριλάβετε ένα προαιρετικό <small>στοιχείο για να αναφέρετε την πηγή σας και θα λάβετε μια παύλα —πριν από αυτό για λόγους στυλ.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis. </p>
  <small> Κάποιος διάσημος </small>
</blockquote>

Παραδείγματα μπλοκ εισαγωγικών

Τα προεπιλεγμένα μπλοκ εισαγωγικά διαμορφώνονται ως εξής:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis.
Κάποιος διάσημος στο Body of work

Για να μετακινήσετε το μπλοκ σας στα δεξιά, προσθέστε class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis.
Κάποιος διάσημος στο Body of work

Τόπος αγώνων

Χωρίς παραγγελία

<ul>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Αστυλ

<ul class="unstyled">

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Διέταξε

<ol>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Περιγραφή

<dl>

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Στη γραμμή

Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>.

Για παράδειγμα , η ενότητα < code> </ code > πρέπει να είναι τυλιγμένη ως ενσωματωμένη .

Βασικό μπλοκ

Χρήση <pre>για πολλές γραμμές κώδικα. Φροντίστε να ξεφύγετε από τυχόν γωνίες στον κώδικα για σωστή απόδοση.

<p>Δείγμα κειμένου εδώ...</p>

<προ>
  <p>Δείγμα κειμένου εδώ...</p>
</pre>

Σημείωση: Βεβαιωθείτε ότι διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.

Μπορείτε προαιρετικά να προσθέσετε την .pre-scrollableκλάση που θα ορίσει μέγιστο ύψος 350 εικονοστοιχεία και θα παρέχει μια γραμμή κύλισης άξονα y.

Google Prettify

Πάρτε το ίδιο <pre>στοιχείο και προσθέστε δύο προαιρετικές κλάσεις για βελτιωμένη απόδοση.

<p> Δείγμα κειμένου εδώ... </p>

<pre class = "prettyprint 
     λινά» >
  <p>Δείγμα κειμένου εδώ...</p>
</pre>

Κατεβάστε το google-code-prettify και δείτε το readme για τον τρόπο χρήσης.

Σήμανση πίνακα

Ετικέτα	Περιγραφή
`<table>`	Στοιχείο αναδίπλωσης για την εμφάνιση δεδομένων σε μορφή πίνακα
`<thead>`	Στοιχείο κοντέινερ για σειρές κεφαλίδας πίνακα ( `<tr>`) για την επισήμανση στηλών πίνακα
`<tbody>`	Στοιχείο κοντέινερ για σειρές πίνακα ( `<tr>`) στο σώμα του πίνακα
`<tr>`	Στοιχείο κοντέινερ για ένα σύνολο κελιών πίνακα ( `<td>`ή `<th>`) που εμφανίζεται σε μία γραμμή
`<td>`	Προεπιλεγμένο κελί πίνακα
`<th>`	Ειδικό κελί πίνακα για ετικέτες στηλών (ή γραμμής, ανάλογα με το εύρος και την τοποθέτηση) Πρέπει να χρησιμοποιείται σε`<thead>`
`<caption>`	Περιγραφή ή περίληψη του τι περιέχει ο πίνακας, ιδιαίτερα χρήσιμο για προγράμματα ανάγνωσης οθόνης

<πίνακας>
  <κεφάλι>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Επιλογές τραπεζιού

Ονομα	Τάξη	Περιγραφή
Προκαθορισμένο	Κανένας	Χωρίς στυλ, μόνο στήλες και σειρές
Βασικός	`.table`	Μόνο οριζόντιες γραμμές μεταξύ των σειρών
Με σύνορα	`.table-bordered`	Στρογγυλοποιεί τις γωνίες και προσθέτει εξωτερικό περίγραμμα
Ζέβρα-ρίγα	`.table-striped`	Προσθέτει ανοιχτό γκρι χρώμα φόντου σε μονές σειρές (1, 3, 5, κ.λπ.)
Συμπυκνωμένο	`.table-condensed`	Κόβει την κάθετη επένδυση στη μέση, από 8px σε 4px, μέσα σε όλα `td`και `th`τα στοιχεία

Παραδείγματα πίνακες

1. Προεπιλεγμένα στυλ πίνακα

Οι πίνακες διαμορφώνονται αυτόματα με λίγα μόνο περιγράμματα για να διασφαλιστεί η αναγνωσιμότητα και η διατήρηση της δομής. Με το 2.0 .tableαπαιτείται η κλάση.

<table class = "table" > 
  …
</table>

#	Ονομα	Επίθετο	Γλώσσα
1	Σημάδι	Οθων	CSS
2	Ιάκωβος	Θόρντον	Javascript
3	Stu	Βαθούλωμα	HTML

2. Τραπέζι ριγέ

Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .table-stripedτάξη.

Σημείωση: Οι ριγέ πίνακες χρησιμοποιούν τον :nth-childεπιλογέα CSS και δεν είναι διαθέσιμος στο IE7-IE8.

<table class = "table table-striped" > 
  …
</table>

#	Ονομα	Επίθετο	Γλώσσα
1	Σημάδι	Οθων	CSS
2	Ιάκωβος	Θόρντον	Javascript
3	Stu	Βαθούλωμα	HTML

3. Τραπέζι με περίγραμμα

Προσθέστε περιγράμματα γύρω από ολόκληρο το τραπέζι και στρογγυλεμένες γωνίες για αισθητικούς λόγους.

<table class = "table-bordered" > 
  …
</table>

#	Ονομα	Επίθετο	Γλώσσα
1	Mark Otto		CSS
2	Ιάκωβος	Θόρντον	Javascript
3	Stu	Βαθούλωμα	Javascript
3	Brosef	Ο Στάλιν	HTML

4. Συμπυκνωμένο τραπέζι

Κάντε τα τραπέζια σας πιο συμπαγή προσθέτοντας την .table-condensedκλάση για να κόψετε τα κελιά του πίνακα στη μέση (από 8 εικονοστοιχεία σε 4 εικονοστοιχεία).

<table class = "table table-condensed" > 
  …
</table>

#	Ονομα	Επίθετο	Γλώσσα
1	Σημάδι	Οθων	CSS
2	Ιάκωβος	Θόρντον	Javascript
3	Stu	Βαθούλωμα	HTML

5. Συνδυάστε τα όλα!

Μη διστάσετε να συνδυάσετε οποιαδήποτε από τις κατηγορίες τραπεζιών για να επιτύχετε διαφορετικές εμφανίσεις χρησιμοποιώντας οποιαδήποτε από τις διαθέσιμες κατηγορίες.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

#	Ονομα	Επίθετο	Γλώσσα
1	Σημάδι	Οθων	CSS
2	Ιάκωβος	Θόρντον	Javascript
3	Stu	Βαθούλωμα	HTML
4	Brosef	Ο Στάλιν	HTML

Ευέλικτο HTML και CSS

Το καλύτερο μέρος για τις φόρμες στο Bootstrap είναι ότι όλες οι εισροές και τα στοιχεία ελέγχου φαίνονται υπέροχα ανεξάρτητα από το πώς τα δημιουργείτε στη σήμανση. Δεν απαιτείται περιττός HTML, αλλά παρέχουμε τα μοτίβα για όσους το χρειάζονται.

Οι πιο περίπλοκες διατάξεις συνοδεύονται από συνοπτικές και κλιμακούμενες κλάσεις για εύκολο στυλ και δέσιμο εκδηλώσεων, ώστε να είστε καλυμμένοι σε κάθε βήμα.

Περιλαμβάνονται τέσσερις διατάξεις

Το Bootstrap έρχεται με υποστήριξη για τέσσερις τύπους διατάξεων φορμών:

Κάθετη (προεπιλογή)
Αναζήτηση
Στη γραμμή
Οριζόντιος

Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.

Control states and more

Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.

States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.

Four types of forms

Bootstrap provides simple markup and styles for four styles of common web forms.

Name	Class	Description
Vertical (default)	`.form-vertical` (not required)	Stacked, left-aligned labels over controls
Inline	`.form-inline`	Left-aligned label and inline-block controls for compact style
Search	`.form-search`	Extra-rounded text input for a typical search aesthetic
Horizontal	`.form-horizontal`	Float left, right-aligned labels on same line as controls

Example forms using just form controls, no extra markup

Basic form

With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.

<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>

Search form

Reflecting default WebKit styles, just add .form-search for extra rounded search fields.

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Inline form

Inputs are block level to start. For .form-inline and .form-horizontal, we use inline-block.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <button type="submit" class="btn">Go</button>
</form>

Horizontal forms

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

What's included

Shown on the left are all the default form controls we support. Here's the bulleted list:

text inputs (text, password, email, etc)
checkbox
radio
select
multiple select
file input
textarea

New defaults with v2.0

Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.

Redesigned browser states

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

<fieldset
  class="control-group error">
  …
</fieldset>

Extending form controls

Form grid sizes

Use the same .span* classes from the grid system for input sizes.

Alternate sizes

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

Prepended text

Here's some help text

Appended text

.00

Here's more help text

Inline checkboxes

1 2 3

Checkboxes

Option one is this and that—be sure to include why it's great Option two can also be checked and included in form results Option three can—yes, you guessed it—also be checked and included in form results

Note: Labels surround all the options for much larger click areas and a more usable form.

Radio buttons

Option one is this and that—be sure to include why it's great Option two can is something else and selecting it will deselect option one

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

Button	Class	Description
	`.btn`	Standard gray button with gradient
	`.btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`.btn-info`	Used as an alternate to the default styles
	`.btn-success`	Indicates a successful or positive action
	`.btn-warning`	Indicates caution should be taken with this action
	`.btn-danger`	Indicates a dangerous or potentially negative action
	`.btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

<a class="btn" href="">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat

icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture

icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle

icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal

Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

With v2.0.1, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

As visuals for your sidebar navigation
For a purely icon-driven navigation
For buttons to help convey the meaning of an action
With links to share context on a user's destination

Ουσιαστικά, οπουδήποτε μπορείτε να βάλετε μια <i>ετικέτα, μπορείτε να βάλετε ένα εικονίδιο.

Παραδείγματα

Χρησιμοποιήστε τα σε κουμπιά, ομάδες κουμπιών για εισαγωγές γραμμής εργαλείων, πλοήγησης ή προσαρτημένης φόρμας.

Φρεσκάρω Ολοκλήρωση αγοράς Διαγράφω

Σχόλιο Ρυθμίσεις Περισσότερες πληροφορίες

Τυπογραφία Επικεφαλίδες, παράγραφοι, λίστες και άλλα στοιχεία ενσωματωμένου τύπου