प्रिंट करने योग्य ट्विटर-बूटस्ट्रैप पेज कैसे बनाएं

Question

मैं ट्विटर-बूटस्ट्रैप का उपयोग कर रहा हूं और मुझे उस पृष्ठ को प्रिंट करने में सक्षम होना चाहिए जिस तरह से वह ब्राउज़र पर दिखता है। मैं ट्विटर-बूटस्ट्रैप के साथ बने अन्य पृष्ठों को ठीक से प्रिंट करने में सक्षम हूं, लेकिन मैं अपने पेज को प्रिंट करने के लिए प्रतीत नहीं हो सकता है जो विशुद्ध रूप से ट्विटर-बूटस्ट्रैप का उपयोग करता है। क्या मुझे कहीं टैग याद आ रहा है?

मुद्रित होने पर आधिकारिक टीबी पेज:

मुद्रित होने पर मेरा पृष्ठ:

मेरा पेज वास्तव में कैसा दिखता है:

Comments

क्या आप एक मीडिया = "स्क्रीन" विशेषता निर्दिष्ट कर रहे हैं? मेरे जवाब पर एक नज़र डालें।

— albertedevigo

Answer 1

मुद्रण के लिए एक स्टाइलशीट सौंपे जाना सुनिश्चित करें।
यह एक अलग स्टाइलशीट हो सकती है:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

या एक जिसे आप सभी उपकरणों के लिए साझा करते हैं:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

फिर, आप अपनी शैलियों को प्रिंटर के लिए अलग-अलग स्टाइलशीट में या मीडिया प्रश्नों का उपयोग करते हुए साझा कर सकते हैं:

@media print {
    /* Your styles here */
}

Comments

मैंने अभी इसे जोड़ा: <लिंक rel = "स्टाइलशीट" टाइप = "टेक्स्ट / सीएसएस" मीडिया = "प्रिंट" href = "bootstrap.min.css"> और इसके अलावा कुछ और करने की आवश्यकता नहीं है। एक जादू की तरह काम किया। धन्यवाद!

— जे। क्यू।

यदि आप पहले से ही इस स्टाइलशीट का उपयोग कर रहे हैं, तो संभावना है कि आप वर्तमान में आपके पास हैं media="screen", जो प्रिंटर द्वारा नहीं देखा जाएगा। आप इसे या तो स्विच कर सकते हैं media="all", या mediaऊपर दिए गए सुझाव के अनुसार हटा सकते हैं ।

— 23

albertedevigo, मुझे स्टाइल के बारे में कुछ मदद चाहिए। जैसे परिवर्तन फ़ॉन्ट-आकार, चौड़ाई, ... क्या वास्तव में बदलने की आवश्यकता है? TIA। @JayQ। : क्या वह अभी भी काम कर रहा है या पुराना है? कारण मुझे यह काम करने के लिए नहीं मिल सकता है।

— मुसाफर ६००

@dreamster, मुद्रण में लागू होने वाली स्टाइलशीट में अपनी शैलियों को शामिल करें। ध्यान दें कि सीएसएस कैस्केडिंग अभी भी काम करता है; इसलिए आदेश, विरासत और चयनकर्ता प्राथमिकताएं परिणाम को प्रभावित करेंगी। आप शायद अपने ही कोड के साथ एक नया सवाल पूछेंगे।

— albertedevigo

Answer 2

बूटस्ट्रैप 3.2 अद्यतन: (वर्तमान रिलीज)

वर्तमान स्थिर बूटस्ट्रैप संस्करण 3.2.0 है ।
संस्करण 3.2 दृश्य-प्रिंट के साथ हटा दिया गया है, इसलिए आपको इस तरह का उपयोग करना चाहिए:

Class                        Browser    Print
 -------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

बूटस्ट्रैप 3 अद्यतन:

प्रिंट कक्षाएं अब दस्तावेजों में हैं: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
       use these for toggling content for print.

Class            Browser    Print
 ----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

बूटस्ट्रैप 2.3.1 संस्करण:

अपने HTML में bootstrap.css फ़ाइल जोड़ने के बाद,
उन भागों को खोजें, जिन्हें आप प्रिंट में नहीं जोड़ना चाहते हैं hidden-printऔर टैग में वर्ग जोड़ सकते हैं। क्योंकि css फ़ाइल में यह शामिल है:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

Comments

क्या ब्राउज़र और प्रिंटर दोनों के मामले में कुछ दिखाई देने के लिए कोई वर्ग नहीं है जहां मैं सब कुछ ( body) के साथ अदृश्य करता हूं .hidden-print, लेकिन दिखाए जाने वाले एक विशिष्ट तत्व को ओवरराइड करना चाहता हूं?

— विंसेंट पियरिएर

@VincentPoirier - यदि कोई तत्व छिपा हुआ है, तो उसके अंदर सब कुछ छिपा हुआ है। इसलिए यह शरीर को छिपाने के लिए सार्थक नहीं है, लेकिन कुछ ऐसा है जो शरीर का हिस्सा है। क्योंकि उस उप-तत्व को दिखाने के लिए कोई संदर्भ (कंटेनर) नहीं होगा। इसके बजाय अपने सभी पत्ती तत्वों को छिपाने के लिए सीएसएस करें (उदाहरण के लिए अपने आंतरिक डिवीजनों पर एक डिफ़ॉल्ट वर्ग रखें), फिर उपयुक्त सीएसएस कक्षा या आईडी का उपयोग करें जहां वांछित दिखाई दे। यह बिल्कुल सही पाने के लिए कुछ प्रयोग की आवश्यकता होगी।

— टूलमेकरसैट

Answer 3

हर के col-md-साथ बदलेंcol-xs-

उदाहरण के लिए: हर की जगह col-md-6के लिए col-xs-6।

यह वह चीज है जिसने मुझे इस समस्या से छुटकारा दिलाने के लिए काम किया है आप देख सकते हैं कि आपको क्या बदलना है।

Comments

धन्यवाद ! प्रिंट दृश्य की तुलना में HTML दृश्य के पैमाने के साथ समस्या थी ... अब सब कुछ अच्छा है!

— डेविड बेलांगेर

धन्यवाद! मेरे पृष्ठ को प्रिंट करते समय मुझे समस्या का सामना करना पड़ रहा था, प्रत्येक divपिछले एक से नीचे जाता था। इस जवाब ने मुझे एक संकेत दिया, मैंने col-xs-*प्रत्येक से पहले जोड़ा col-md-*और इस मुद्दे को तय किया। अस्वीकरण: मैंने एक कंटेनर को जोड़ने का परीक्षण नहीं <div class="row"></div>किया है, जिससे समस्या हल हो सकती है (स्पष्ट प्रतीत होता है)।

— Fr0zenFyr

जब तक किसी के पास मुद्रण के लिए संकीर्ण स्क्रीन (जैसे फोन) के लिए एक अलग लेआउट होने का इरादा न हो। अजीब लगता है कि बूटस्ट्रैप प्रिंटर लॉजिक को लगता है कि इसकी प्रिंट स्क्रीन इतनी संकीर्ण है।

— टूलमेकरसैट

यह शीर्ष पर होना चाहिए।

— सूरज

बस यह जोड़ने के लिए कि आप col-md को बदल सकते हैं- जैसा कि उत्तर कहता है या आप केवल col-xs- जोड़ सकते हैं: जैसे: class = "col-md-6 col-xs-6" और आप आवश्यकताओं के आधार पर मिश्रण और मिलान कर सकते हैं अपने डिजाइन के

— ज़ेडोरेक्स

Answer 4

@media printसीएसएस फ़ाइल में कोड का एक भाग है (बूटस्ट्रैप 3.3.1 [अपडेट:] से 3.3.5), यह स्ट्रिप्स वस्तुतः सभी स्टाइलिंग करता है, इसलिए आपको काम करते समय भी काफी प्रिंट-आउट मिलता है।

अभी के लिए मुझे @media printbootstrap.css से उस अनुभाग को अलग करने का सहारा लेना पड़ा है - जिसके बारे में मैं वास्तव में खुश नहीं हूँ , लेकिन मेरे उपयोगकर्ता सीधे स्क्रीन-ग्रेब चाहते हैं, इसलिए इसे अभी करना होगा। अगर किसी को पता है कि बूटस्ट्रैप फ़ाइलों में बदलाव के बिना इसे कैसे दबाया जाए तो मुझे बहुत दिलचस्पी होगी।

यहां 'अपमानजनक' कोड ब्लॉक है, जो लाइन # 192 से शुरू होता है:

@media print {
  *,
  *:before,enter code here
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

Answer 5

मुझे जो सबसे अच्छा विकल्प मिला वह था http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/

html2canvas(document.body, {  
  onrendered: function(canvas) {
    $("#page").hide();
    document.body.appendChild(canvas);
    window.print();
    $('canvas').remove();
    $("#page").show();
  }
});

Comments

मैंने 0.4 और 0.5 दोनों की कोशिश की लेकिन दोनों में से किसी ने भी काम नहीं किया। 0.5 ने मेरे पृष्ठ के बाद कुछ अच्छे दिखने वाले सामान को जोड़ा, लेकिन मूल पृष्ठ अभी भी था, और फिर मुझे यह कैसे प्रिंट करना चाहिए था? 0.4 को प्रिंट करने की कोशिश कर रहा है, मूल पृष्ठ अभी भी था, और रेंडर थोड़े टूट गया था।

— सेसाबा तोथ

Answer 6

यदि कोई व्यक्ति यहां बूटस्ट्रैप v2.XX के समाधान की तलाश में है। मैं उस समाधान को छोड़ रहा हूं जिसका मैं उपयोग कर रहा था। यह पूरी तरह से सभी ब्राउज़रों पर परीक्षण नहीं किया गया है लेकिन यह एक अच्छी शुरुआत हो सकती है।

1) सुनिश्चित करें कि मीडिया विशेषता bootstrap-responsive.cssहै screen।

<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />

2) एक बनाएँ print.cssऔर सुनिश्चित करें कि इसकी मीडिया विशेषताprint

<link href="/css/print.css" rel="stylesheet" media="print" />

3) अंदर print.css, html और शरीर में अपनी वेबसाइट की "चौड़ाई" जोड़ें

html, 
body {
    width: 1200px !important;
}

4.) आवश्यक मीडिया क्वेरी कक्षाओं को पुन: उत्पन्न करें print.cssक्योंकि वे अंदर थे bootstrap-responsive.cssऔर हमने इसे प्रिंट करते समय अक्षम कर दिया है।

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

यहाँ पूर्ण संस्करण है print.css:

html, 
body {
    width: 1200px !important;
}

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

Answer 7

2 चीजें FYI करें -

1. अभी के लिए, उन्होंने कुछ टॉगल कक्षाएं जोड़ी हैं। देखें कि नवीनतम स्थिर रिलीज में क्या उपलब्ध है - उत्तरदायी-यूटिलिटीज में बिना प्रिंट के टॉगल करें
2. बूटस्ट्रैप 3.0 में आने वाले नए और बेहतर समाधान - वे एक अलग प्रिंट.लेस फ़ाइल जोड़ रहे हैं। अलग प्रिंट देखें

Answer 8

टैबलेट या डेस्कटॉप की तरह प्रिंट व्यू देखने के लिए बूटस्ट्रैप को .less के रूप में शामिल करें। एस के रूप में नहीं और फिर आप बूटस्ट्रैप उत्तरदायी कक्षाओं को बूटस्ट्रैप_वायरल फ़ाइल के अंत में इस तरह उदाहरण के लिए अधिलेखित कर सकते हैं:

@container-sm:      1200px;
@container-md:      1200px;
@container-lg:      1200px;
@screen-sm:         0;

फ़ाइल के अंत में इस चर को डालने के बारे में चिंता न करें। LESS वैरिएबल के आलसी लोडिंग का समर्थन करता है इसलिए उन्हें लागू किया जाएगा।

Answer 9

यदि आप A4 प्रिंट पर कॉलम रखना चाहते हैं (जो 540px के आसपास है) तो यह एक अच्छा विचार है

@media print {
    .make-grid(print-A4);
}

.make-print-A4-column(@columns) {
    @media print {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

आप इसे इस तरह से उपयोग कर सकते हैं:

<div class="col-sm-4 col-print-A4-4">