I am a Bootstrap user and have been one for many years now. I am looking to use Semantic UI in a person project and have some questions.
1) Is it possible to get the CSS in one single file and the JS in one single file easily? I don't like having to include a bunch of different files and I want to make sure that all components are included.
2) When it comes to layouts, I was attempting to build a simple two column layout however, every time I shrank the window down in size, the content from the right pane would over lap the content in the left pane. Why is this?
3) Do I have to write my own CSS to build the basic construct of my page(s)?
4) Is it possible with the side bar icon navigation to have the side bar be displayed all the time?
Thank you.
1.my project include CDN
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//oss.maxcdn.com/semantic-ui/2.0.7/semantic.min.css">
<script src="//oss.maxcdn.com/semantic-ui/2.0.7/semantic.min.js"></script>
2.this?
Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.
<table class="ui unstackable table">
3. is like boostrap . Fisrst you can do
Container
4.I don't konw what your mean
Related
English is my second language and I don't know how to call the bottom bar #3 in below snapshot - bottom navigator I guess?
Well there are two few options:
Carousel Controls (this is used in bootstrap as a class name)
Indicators - either Carousel Indicators or Slideshow Indicators (this is used in W3.CSS)
I would think both are just as good in explaining what you mean and they are both used equally as much when talking about those small dots.
You can also use:
Pagination - though this is not as popular, and is mostly used to describe pages and not slideshows
Carousel Dots - which sort of explains it visually
When you need to know a specific term of a thing from a website, you can check the source code (right click → inspect element) as the term is sometimes revealed as a class name or something similar. As far as I can tell they don’t have one definitive name, as each site and each carousel library has their own name for them.
These are some acceptable names:
Carousel indicators
Carousel controls
Carousel dots (Owl Carousel)
Dot navigation
Carousel bullets (on shouldiuseacarousel.com)
I would like to make email responsive, but I have some problems with data table (no layout table). The deal is make 2 tables : one for desktop and another for mobile. Until there, no problem I can hide/show the table depending on the screen size. But I have a problem when displaying mobile table.
Take a look at this codepen ...
When the mobile table is displayed I would like the 2nd column has an "auto-size" in order to have the text on one line.
Do you have any ideas ? I can't find the correct css ...
Thank.
The 2nd column for the mobile layout needs a min-width (e.g. 100px).
I.e.
However, this table no longer works in today's email clients, if it ever worked. I have tested it using Litmus and Outlook (any), Gmail, iPhones - all have critical faults.
A much better way is to use one table - easier for maintenance as well - and you can either keep it in the old-fashioned datatable manner, or use card UI design to massively improve its readability, flexibility, and accessibility.
The essential features of the single datatable are to use a hybrid structure for the email, three columns, and repeat the header in each column. Then hide the headers for desktops (or show them for mobiles).
Like so:
Read the linked article for full details.
The essential features of the card UI design is to gather all the information for one row together, and display it on multiple lines, using hierarchy and gestalt laws to aid readability.
For example:
If you want to keep text in 2nd column in one line, maybe check this:
Keep a line of text as a single line - wrap the whole line or none at all
To adjust the width of this column, try playing with: width: auto.
Next time consider using responsive Twitter-Bootstrap framework, bro.
I'm new here and to Bootstrap so apologies for any stupidity.
In Bootstrap I'm trying to display .span4 in a row over 2 columns, this is because of page width, which should eventually nest into each other and leave no space. However with all I have tried at the moment I can still only manage to get each .span4 to lineup with the bottom-line of the longest span4 I have created. The site will eventually be dynamic and the size of the list could change frequently.
Looked at many different questions on here but no joy yet.
I have an example of my tryings here http://jsfiddle.net/joebarr/YJunh/
I think you're looking for jQuery Masonry. See for example: How can I float elements with different size in a tile or How to Create Grid/Tile View with CSS?
In case it must be CSS only, the accepted answer for the first link above ( https://stackoverflow.com/a/15320187/1449799 ) shows a good approximation.
This is my first post and I'm trying to learn rails with twitter bootstrap. I am using the carousel and I want the bottom right to contain numbers that are clickable to change the picture, rather than having arrows on the far left & right side of the image. For example, the numbers 1,2, & 3 could be in squares at the bottom right and each change the image shown. How do I do that?
There is a plan to add pills navigation to the Carousel Plugin in milestone 2.3. There already exists a pull request which adds that functionality, so you might be best off using that version of bootstrap-carousel.js. However, be forewarned that this is new code and may be subject to changes, so if you elect to use it, be prepared to follow it through the life cycle.
Here is a demo of the updated plugin:
JSFiddle
Currently it uses pills, but changing it to numbers shouldn't be too difficult. Probably just add some code like:
$('.carousel-pills > span').each(function (i) {
$(this).text(i+1);
});
running this after the carousel initializes. You'll have to tweak the LESS/CSS to change the pills from dots to boxes.
I want to divide my page into two sections. It must be separated by a slider. In the left-pane, I want to display Form names and on the right-pane, I want to show the Form that was selected from the left-pane.
Which controls to use?
Maybe you're looking for Coda Slider?
Are you thinking about using a frameset (* shudder *)?
I know you don't have the jQuery tag, or even javascript for that matter, but this jQuery Splitter Plugin may do the trick... I'm sure you can expand the content to fit the page.