Use preset classnames instead of inline style for Responsive design

At present, most styles are implemented by **Inline Style**, it's not friendly for responsive design. I think it's better to use the **Preset Classnames**. for example:

```
= rst rst-theme-{themeName}
== rst-container
=== rst-list
==== rst-item rst-item--depth-{depth} rst-item--has-children rst-item--expanded rst-item--draggable etc.
===== rst-item__header
====== rst-item__handle
====== rst-item__title
===== rst-item__body
==== rst-item rst-item--depth-2 rst-item--collapsed
```

Keeping css style separated from rendering allows us to have more flexible control for responsive design, and also makes the component code less messy and easier to debug and maintain.