Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, эроста вестибулум.
Bootstrap - веб-сайтлар һәм сайтларның үсешен башлап җибәрү өчен эшләнгән Твиттердан кораллар җыелмасы.
Бу типография, формалар, төймәләр, таблицалар, челтәрләр, навигация һ.б. өчен төп CSS һәм HTMLны үз эченә ала.
Нерд уяулыгы: Bootstrap Less белән төзелгән һәм заманча браузерларны истә тотып капкадан чыгару өчен эшләнгән.
Иң тиз һәм җиңел башлау өчен, бу фрагментны веб-битегезгә күчерегез.
Азрак куллану фанаты? Проблема юк, репоны клонлагыз һәм бу юлларны өстәгез:
Github'тагы рәсми Bootstrap репо белән йөкләү, тарату, тарту, файл чыгару һәм башкалар.
Твиттерның алдагы көннәрендә инженерлар үзләре таныш булган китапханәне диярлек кулландылар. Bootstrap тәкъдим ителгән проблемаларга җавап буларак башланды һәм Твиттерның беренче Hackweek вакытында үсеш тизләнде.
Твиттердагы күп инженерларның ярдәме һәм кире кайтуы белән, Bootstrap төп стильләрне генә түгел, ә зәвыклы һәм чыдам фронт дизайн үрнәкләрен дә үз эченә ала.
Dev.twitter.com сайтында тулырак укыгыз ›
Bootstrap Chrome, Safari, Internet Explorer һәм Firefox кебек эре заманча браузерларда сынала һәм ярдәм итә.
Bootstrap тупланган CSS, компиляцияләнмәгән һәм үрнәк шаблоннар белән тулы.
Bootstrap кысаларында бирелгән килешү челтәре 940px киңлектәге 16 баганалы челтәр. Бу популяр 960 челтәр системасының тәме, ләкин сул һәм уң якларда өстәмә маржа / паддерсыз.
Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 16 нигез баганасын үз эченә ала. Күбрәк вариацияләр өчен түбәндәге мисалларны карагыз.
- <div class = "row" >
- <div class = "span6 баганалар" >
- ...
- </div>
- <div class = "span10 багана" >
- ...
- </div>
- </div>
Килешү һәм гади 940px киңлектә, бер сайт белән тәэмин ителгән теләсә нинди вебсайт яки бит өчен үзәкләштерелгән макет <div.container>
.
- <body>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Мин һәм максималь киңлекләр һәм сул як ягы белән альтернатив, сыгылмалы сыеклык структурасы. Кушымталар һәм документлар өчен бик яхшы.
- <body>
- <div class = "контейнер-сыеклык" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "эчтәлек" >
- ...
- </div>
- </div>
- </body>
Веб-битләрегезне структуралаштыру өчен стандарт типографик иерархия.
Бөтен типографик челтәр безнең preboot.less файлындагы ике азрак үзгәрүчәнлеккә нигезләнгән: @basefont
һәм @baseline
. Беренчесе - төп шрифт зурлыгы, икенчесе - төп сызык биеклеге.
Без бу үзгәрүчәннәрне, һәм кайбер математиканы кулланабыз, кырлар, паддинглар, һәм безнең төрле типтагы биеклекләр һәм башкалар.
Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт чарасы.
Басым, адреслар, кыскартулар куллану
<strong>
<em>
<address>
<abbr>
Басым тэглары ( <strong>
һәм <em>
) сүзнең яки сүзтезмәнең тирә-як күчермәсенә караганда өстәмә әһәмиятен яки басымын күрсәтү өчен кулланылырга тиеш. <strong>
Мөһимлек һәм стресска<em>
басым ясау өчен кулланыгыз .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentation massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Искәрмә:<b>
HTML5'та куллану һәм тегларны куллану әле дә яхшы, <i>
һәм алар тиешенчә калын һәм италик булырга тиеш түгел (семантик элемент булса да, кулланыгыз). <b>
өстәмә әһәмият бирмичә сүзләрне яки сүзтезмәләрне яктырту <i>
өчен, шул ук вакытта тавыш, техник терминнар һ.б.
Элемент контакт мәгълүматы өчен иң <address>
якын бабасы яки бөтен эш органы өчен кулланыла. Менә ул ничек:
Искәрмә: һәрбер сызык <address>
сызык-тәнәфес () белән тәмамланырга тиеш, яки эчтәлекне дөрес төзү <br />
өчен блок дәрәҗәсендәге тег белән төрелергә тиеш (мәсәлән ).<p>
Кыскартулар һәм кыскартулар өчен <abbr>
тегны кулланыгыз ( HTML5<acronym>
искергән ). Теног эчендә стенограмма формасын куегыз һәм тулы исем өчен исем куегыз.
<blockquote>
<p>
<small>
Блоккотны кертү өчен, әйләндереп <blockquote>
алыгыз . Чыганагыгызны китерү өчен элементны кулланыгыз, һәм сез моңа кадәр эм сызыгын алырсыз .<p>
<small>
<small>
—
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere erat anten venenatis dapibus posuere velit aliquet.
Доктор uliлий Хибберт
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Таблицалар бик яхшы - күп нәрсә өчен. Зур таблицалар, файдалы, масштаблы һәм укылырлык булырга (код дәрәҗәсендә) бераз билгеләргә ярату кирәк. Менә берничә киңәш.
Columnәрвакыт багана башларын иерархия <thead>
белән <thead>
каплагыз .<tr>
<th>
Колонка башларына охшаган, сезнең өстәлнең бөтен эчтәлеге <tbody>
сезнең иерархиягез белән уралган булырга тиеш <tbody>
>> .<tr>
<td>
Барлык таблицалар да укуны тәэмин итү һәм структураны саклау өчен төп чикләр белән автоматик рәвештә ясалачак. Өстәмә класслар яки атрибутлар өстәргә кирәкми.
# | Исем | Фамилия | Тел |
---|---|---|---|
1 | Кайберләре | Бер | Инглиз |
2 | Джо | Алты пакет | Инглиз |
3 | Стю | Теш | Код |
- <таблица>
- ...
- </table>
Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .zebra-striped
классны өстәгез.
# | Исем | Фамилия | Тел |
---|---|---|---|
1 | Кайберләре | Бер | Инглиз |
2 | Джо | Алты пакет | Инглиз |
3 | Стю | Теш | Код |
Искәрмә: Zebra-striping - прогрессив көчәйтү, IE8 һәм аннан түбәнрәк браузерлар өчен мөмкин түгел.
- <өстәл класы = "зебра-сызыклы" >
- ...
- </table>
Алдагы мисалны алсак, jQuery һәм Tablesorter плагины аша сортлау функциясен тәэмин итеп, таблицаларыбызның файдалылыгын яхшыртабыз. Сортны үзгәртү өчен теләсә нинди багана башына басыгыз.
# | Исем | Фамилия | Тел |
---|---|---|---|
1 | Сезнең | Бер | Инглиз |
2 | Джо | Алты пакет | Инглиз |
3 | Стю | Теш | Код |
- <script src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <скрипт >
- $ ( функция () {
- $ ( "таблица # sortTableExample" ). таблицалар ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <өстәл класы = "зебра-сызыклы" >
- ...
- </table>
Барлык формаларга да укырлык һәм масштаблы итеп күрсәтү өчен демократик стильләр бирелә. Стильләр текст кертү, исемлекләр, текстлар, радио төймәләре һәм пунктлар, төймәләр өчен тәкъдим ителә.
Формагызның HTML-ны өстәгез .form-stacked
, һәм аларның сул ягына түгел, ә кырлары өстендә ярлыклар булыр. Сезнең формалар кыска булса яки авыррак формалар өчен ике багана булса, бу бик яхшы эшли.
Конвенция буларак, төймәләр эш өчен кулланыла, ә сылтамалар объектлар өчен кулланыла. Мәсәлән, "Йөкләү" төймә, "соңгы эшчәнлек" сылтама булырга мөмкин.
Барлык төймәләр дә ачык соры стильгә туры килә, ләкин төрле төсле стильләр өчен берничә функциональ класс кулланылырга мөмкин. Бу классларга зәңгәр .primary
класс, ачык-зәңгәр .info
класс, яшел .success
класс һәм кызыл .danger
класс керә. Өстәвенә, үз стильләрегезне әйләндерү җиңел борчак.
Кнопка стильләре кулланылган теләсә нинди әйбердә .btn
кулланылырга мөмкин. <a>
Гадәттә сез аларны гына кулланырга , элементларны <button>
сайларга теләрсез . <input>
Менә ул ничек:
Зуррак яки кечерәк төймәләр? Бул!
Актив булмаган яки кушымта тарафыннан теге яки бу сәбәп аркасында инвалид булган төймәләр өчен инвалид халәтне кулланыгыз. Бу .disabled
сылтамалар һәм элементлар :disabled
өчен .<button>
div.alert-message
Уңышсызлыкны, мөмкин булган уңышсызлыкны яки эшнең уңышын күрсәтү өчен бер юллы хәбәрләр. Бигрәк тә формалар өчен файдалы.
div.alert-message.block-message
Бераз аңлатуны таләп иткән хәбәрләр өчен бездә абзац стиле турында хәбәрләр бар. Болар озынрак хаталар җибәрү, кулланучыны көтелгән эш турында кисәтү, яисә биткә күбрәк басым ясау өчен бик яхшы.
Модальләр - диалоглар яки яктырткычлар - фон контекстын саклау мөһим булган контекстуаль чаралар өчен бик яхшы.
Бер яхшы тән…
Twipsies буталчык кулланучыга булышу һәм аларны дөрес юнәлештә күрсәтү өчен бик файдалы.
Лорем ипсум доллары утыра амет илло хата ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus resultunturur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam архитектура эксплуатациясе кваси фугит, тотам долоремке унде сунт сед дикта ква аккусантиум фугит волупт вему волуптас вему волутам
Биткә субтекстуаль мәгълүмат бирү өчен поповерларны кулланыгыз, макетка тәэсир итмичә.
Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, эроста вестибулум.
Bootstrap Preboot белән төзелгән , ачык чыганаклы миксиннар һәм үзгәрешләр пакеты, тизрәк һәм җиңелрәк веб үсеше өчен CSS эшкәртүчесе Less белән берлектә кулланылачак.
Bootstrap'та Preboot'ны ничек кулланганыбызны һәм киләсе проектта азрак эшләсәгез, сез аны ничек куллана алуыгызны тикшерегез.
Bootstrap-ның аз үзгәрүчәннәрен, миксиннарын һәм CSS-та оя коруны браузерыгыздагы javascript аша тулысынча куллану өчен бу параметрны кулланыгыз.
- <сылтама rel = "стиль таблицасы / азрак" href = "аз / bootstrap.less" медиа = "барысы" />
- <script src = "js / less-1.1.3.min.js" > </script>
.Js чишелешен сизми? Кечкенә Mac кушымтасын кулланып карагыз яки Node.js кулланыгыз , кодыгызны урнаштырганда.
Bootstrap кысаларында Twitter Bootstrap'ка кертелгәннәрнең кайбер моментлары. Күбрәк йөкләү һәм өйрәнү өчен Bootstrap сайтына яки Github проект битенә керегез.
Кечкенә үзгәрүләр сезнең CSS баш авыртуыгызны саклап калу һәм яңарту өчен бик яхшы. Төс кыйммәтен яки еш кулланыла торган кыйммәтне үзгәртергә теләгәндә, аны бер урында яңартып торыгыз.
- // Сылтамалар
- @linkColor : # 8b59c2;
- @linkColorHover : караңгылану ( @linkColor , 10 );
- // Соры
- @black : # 000;
- @grayDark : җиңеләйтегез ( @black , 25 %);
- @gray : җиңеләйтегез ( @black , 50 %);
- @grayLight : җиңеләйтегез ( @black , 70 %);
- @grayLighter : җиңеләйтегез ( @black , 90 %);
- @ ак : #fff;
- // Акцент төсләре
- @blue : # 08b5fb;
- @green : # 46a546;
- @red : # 9d261d;
- @yellow : # ffc40d;
- @orange : # f89406;
- @pink : # c3325f;
- @purple : # 7a43b6;
- // Төп челтәр
- @basefont : 13px ;
- @baseline : 18px ;
CSS нормаль /* ... */
синтаксисына өстәп, аңлатма бирүнең тагын бер стиле тәкъдим ителә.
- // Бу аңлатма
- / * Бу шулай ук аңлатма * /
Миксиннар, нигездә, CSS өчен өлешләр яки өлешләр, сезгә код блогын берләштерергә мөмкинлек бирә. Алар сатучы префиксланган үзлекләр өчен бик яхшы box-shadow
, кросс-браузер градиентлары, шрифт стеклары һәм башкалар. Түбәндә Bootstrap белән кертелгән миксиннар үрнәге.
- # шрифт {
- . стенограмма ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {
- шрифт - зурлык : @size ;
- шрифт - авырлык : @ авырлык ;
- сызык - биеклек : @lineHeight ;
- }
- . санс - сериф ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {
- шрифт - гаилә : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- шрифт - зурлык : @size ;
- шрифт - авырлык : @ авырлык ;
- сызык - биеклек : @lineHeight ;
- }
- . сериф ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {
- шрифт - гаилә : "Грузия" , Times New Roman , Times , санс - сериф ;
- шрифт - зурлык : @size ;
- шрифт - авырлык : @ авырлык ;
- сызык - биеклек : @lineHeight ;
- }
- . моноспос ( @ авырлык : нормаль , @ зурлык : 12px , @lineHeight : 20px ) {
- шрифт - гаилә : "Монако" , Курьер Яңа , моноспос ;
- шрифт - зурлык : @size ;
- шрифт - авырлык : @ авырлык ;
- сызык - биеклек : @lineHeight ;
- }
- }
- # градиент {
- . горизонталь ( @startColor : # 555, @endColor: # 333) {
- фон - төс : @endColor ;
- фон - кабатлау : кабатлау - х ;
- фон - рәсем : - khtml - градиент ( сызыклы , сул өскә , уң өскә , ( @startColor ) дан ( @endColor ) кадәр ; // Конкорор
- фон - рәсем : - моз - сызыклы - градиент ( сулда , @startColor , @endColor ); // FF 3.6+
- фон - рәсем : - мс - сызыклы - градиент ( сулда , @startColor , @endColor ); // IE10
- фон - рәсем : - вебкит - градиент ( сызыклы , сул өске , уң өс , төс - тукталыш ( 0 %, @startColor ), төс - тукталыш ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- фон - рәсем : - вебкит - сызыклы - градиент ( сулда , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- фон - рәсем : - о - сызыклы - градиент ( сулда , @startColor , @endColor ); // Опера 11.10
- фон - рәсем : сызыклы - градиент ( сулда , @startColor , @endColor ); // Le standard
- }
- . вертикаль ( @startColor : # 555, @endColor: # 333) {
- фон - төс : @endColor ;
- фон - кабатлау : кабатлау - х ;
- фон - рәсем : - khtml - градиент ( сызыклы , сул өске , сул асты , ( @startColor ) дан ( @endColor ) ); // Конкорор
- фон - рәсем : - моз - сызыклы - градиент ( @startColor , @endColor ); // FF 3.6+
- фон - рәсем : - мс - сызыклы - градиент ( @startColor , @endColor ); // IE10
- фон - рәсем : - вебкит - градиент ( сызыклы , сул өске , сул асты , төс - тукталыш ( 0 %, @startColor ), төс - тукталыш ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- фон - рәсем : - вебкит - сызыклы - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- фон - рәсем : - о - сызыклы - градиент ( @startColor , @endColor ); // Опера 11.10
- фон - рәсем : сызыклы - градиент ( @startColor , @endColor ); // Стандарт
- }
- . юнәлешле ( @startColor : 55 555, @endColor: # 333, @deg: 45deg) {
- ...
- }
- . вертикаль - өч - төсләр ( @startColor : # 00b3ee, @midColor: # 7a43b6, @colorStop: 50%, @endColor: # c3325f) {
- ...
- }
- }
Түбәндәге кебек сыгылучан һәм көчле катнашмалар тудыру өчен матур итеп математика эшләгез.
- // Челтәр
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @ сайт киңлеге : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Челтәр системасы
- . контейнер {
- киңлеге : @ сайт киңлеге ;
- маржа : 0 автомобиль ;
- . Clearfix ();
- }
- . баганалар ( @columnSpan : 1 ) {
- киңлеге : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . офсет ( @columnOffset : 1 ) {
- маржа - сулда : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }