কীভাবে একটি মুদ্রণযোগ্য টুইটার-বুটস্ট্র্যাপ পৃষ্ঠা তৈরি করতে হয়

Question

আমি টুইটার-বুটস্ট্র্যাপ ব্যবহার করছি এবং পৃষ্ঠাটি ব্রাউজারে যেমন দেখায় তেমন মুদ্রণ করতে সক্ষম হওয়া দরকার। আমি টুইটার-বুটস্ট্র্যাপের সাহায্যে তৈরি অন্যান্য পৃষ্ঠাগুলি ঠিক মুদ্রণ করতে সক্ষম হয়েছি তবে আমার পৃষ্ঠাটি নিখুঁতভাবে টুইটার-বুটস্ট্র্যাপ ব্যবহার করে মুদ্রণ করতে পারে না। আমি কোথাও একটি ট্যাগ অনুপস্থিত?

অফিসিয়াল টিবি পৃষ্ঠা মুদ্রিত হলে:

আমার পৃষ্ঠাটি যখন মুদ্রিত হবে:

আমার পৃষ্ঠাটি আসলে দেখতে কেমন:

Comments

আপনি কি একটি মিডিয়া = "স্ক্রিন" বৈশিষ্ট্যটি উল্লেখ করছেন? আমার উত্তর একবার দেখুন।

— আলবার্তেভিগো

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 = "বুটস্ট্র্যাপ.মিন.সিএসএস"> এবং অন্য কিছু করার দরকার নেই need কবজির মতো কাজ করেছেন। ধন্যবাদ!

— জে কি।

আপনি যদি ইতিমধ্যে এই স্টাইলশিটটি ব্যবহার করছেন তবে আপনার বর্তমানে সম্ভাবনা রয়েছে media="screen"যা কোনও প্রিন্টার দ্বারা দেখা যাবে না। আপনি হয় এটিতে স্যুইচ করতে পারেন media="all", বা mediaউপরের উত্তরটির পরামর্শ অনুসারে সরাতে পারেন ।

— ওয়েক্স

আলবার্তেভিগো, স্টাইলিং সম্পর্কিত আমার কিছু সহায়তা দরকার। পরিবর্তিত হরফ আকার, প্রস্থের মতো ... ... পরিবর্তন করার জন্য ঠিক কী দরকার? টিয়া। @JayQ। : তা কি এখনও কাজ করে নাকি পুরানো? কারণ আমি এটি কাজ করতে পারি না।

— musaf006

@ ড্রিমস্টার, প্রিন্টিংয়ের ক্ষেত্রে প্রযোজ্য স্টাইলশিটে কেবল আপনার স্টাইলগুলি অন্তর্ভুক্ত করুন। নোট করুন যে সিএসএস ক্যাসকেডিং এখনও কাজ করে; সুতরাং আদেশ, উত্তরাধিকার এবং নির্বাচক অগ্রাধিকার ফলাফল প্রভাবিত করবে। আপনি সম্ভবত নিজের কোড দিয়ে একটি নতুন প্রশ্ন জিজ্ঞাসা করতে চাইবেন।

— আলবার্তেভিগো

Answer 2

বুটস্ট্র্যাপ ৩.২ আপডেট: (বর্তমান প্রকাশ)

বর্তমান স্থিতিশীল বুটস্ট্র্যাপ সংস্করণটি 3.2.0 ।
সংস্করণে ৩.২ দৃশ্যমান-মুদ্রণ হ্রাস করা হয়েছে, সুতরাং আপনার এটি ব্যবহার করা উচিত:

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

বুটস্ট্র্যাপ ২.৩.১ সংস্করণ:

আপনার এইচটিএমএলে বুটস্ট্র্যাপ.এসএস ফাইল যুক্ত করার পরে,
আপনি যে অংশগুলি মুদ্রণ করতে চান না hidden-printএবং ট্যাগগুলিতে শ্রেণি যুক্ত করতে চান তা সন্ধান করুন । কারণ সিএসএস ফাইলের মধ্যে এটি রয়েছে:

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

Comments

যেখানে আমি সমস্ত কিছু ( body) অদৃশ্য করি সেই ক্ষেত্রে ব্রাউজার এবং প্রিন্টারের উভয়কেই কিছু দৃশ্যমান করার জন্য কোনও শ্রেণি নেই .hidden-print, তবে একটি নির্দিষ্ট উপাদানটি দেখানোর জন্য ওভাররাইড করতে চাই?

— ভিনসেন্ট পোইরিয়ার

@ ভিনসেন্টপোয়ারিয়ার - যদি কোনও উপাদান লুকানো থাকে তবে এর অভ্যন্তরের সমস্ত কিছুই গোপন থাকবে। সুতরাং দেহটি আড়াল করা অর্থবহ নয়, তবে এমন কোনও অংশ লুকিয়ে রাখুন যা শরীরের অঙ্গ। কারণ সেই উপ-উপাদানটি দেখানোর মতো কোনও প্রসঙ্গ (ধারক) থাকবে না। পরিবর্তে আপনার সমস্ত পাতার উপাদানগুলি লুকানোর জন্য সিএসএস করুন (উদাহরণস্বরূপ আপনার অভ্যন্তরের ডিভগুলিতে একটি ডিফল্ট শ্রেণি স্থাপন করুন), তারপরে উপযুক্ত সিএসএস শ্রেণি বা আইডি ব্যবহার করুন যেখানে দৃশ্যমান হওয়ার ইচ্ছে রয়েছে। এটি সঠিকভাবে পেতে সম্ভবত কিছু পরীক্ষার প্রয়োজন হবে।

— টুলমেকারস্টেভ

Answer 3

প্রত্যেক প্রতিস্থাপন col-md-সঙ্গেcol-xs-

যেমন: প্রতিটিতে প্রতিস্থাপন col-md-6করুন col-xs-6।

এই জিনিসটি যা আমার জন্য এই সমস্যা থেকে মুক্তি পাওয়ার জন্য কাজ করেছিল আপনি কী পরিবর্তন করতে হবে তা দেখতে পাচ্ছেন।

Comments

ধন্যবাদ! প্রিন্ট ভিউয়ের তুলনায় এইচটিএমএল ভিউয়ের স্কেল নিয়ে সমস্যা হচ্ছিল ... এখন সবকিছু ঠিক আছে!

— ডেভিড বেলঞ্জার

হেই ধন্যবাদ! আমার পৃষ্ঠাটি মুদ্রণের সময় আমি সমস্যার মুখোমুখি হয়েছিলাম, প্রত্যেকে divপূর্বের পৃষ্ঠার নীচে যেত। এই উত্তরটি আমাকে একটি ইঙ্গিত দিয়েছে, আমি col-xs-*প্রত্যেকটির আগে যুক্ত করেছি col-md-*এবং এটি সমস্যার সমাধান করেছে। অস্বীকৃতি: আমি কোনও ধারক যুক্ত করার পরীক্ষা করিনি কারণ <div class="row"></div>এটি সমস্যার সমাধানও করতে পারে (স্পষ্ট বলে মনে হয়)।

— Fr0zenFyr

মুদ্রণের চেয়ে সংকীর্ণ পর্দার (যেমন ফোন) জন্য আলাদা লেআউট রাখার ইচ্ছা না থাকলে। আজব লাগে যে বুটস্ট্র্যাপ প্রিন্টার যুক্তি মনে করে এর মুদ্রণ স্ক্রিনটি এত সংকীর্ণ।

— টুলমেকারস্টেভ

এটি শীর্ষে থাকা উচিত।

— সুরজ

উত্তর যুক্ত হিসাবে আপনি কল-এমডি- প্রতিস্থাপন করতে পারবেন বা কেবল কল-এক্সএস- পছন্দ করতে পারেন: ক্লাস = "কল-এমডি -6 কোল-এক্সএস -6" এবং এটি প্রয়োজনীয়তার উপর নির্ভর করে আপনি মিশ্রিত করতে পারেন আপনার নকশা।

— জাইডোরক্স

Answer 4

@media printসিএসএস ফাইলে কোডের একটি বিভাগ রয়েছে (বুটস্ট্র্যাপ ৩.৩.১ [আপডেট:] থেকে ৩.৩.৫), এটি কার্যত সমস্ত স্টাইলিংগুলিকে স্ট্রিপ করে, তাই এটি কাজ করার পরেও আপনি মোটামুটি নিদারুণ প্রিন্ট-আউট পেতে পারেন।

এখন আমি বাইরে stripping অবলম্বন করে থাকেন @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, 
body {
    width: 1200px !important;
}

৪) প্রয়োজনীয় মিডিয়া ক্যোয়ারী ক্লাসগুলি পুনরুত্পাদন করুন 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 টি বিষয় এফওয়াইআই -

1. আপাতত, তারা কয়েকটি টগল ক্লাস যুক্ত করেছে। সর্বশেষতম স্থিতিশীল প্রকাশে কী পাওয়া যায় তা দেখুন - প্রতিক্রিয়াশীল-ইউটিলিটিস.বিহীন টোগলগুলি মুদ্রণ করুন
2. নতুন এবং উন্নত সমাধান বুটস্ট্র্যাপ 3.0 এ আসছে - তারা একটি পৃথক মুদ্রণহীন ফাইল যুক্ত করছে adding পৃথক মুদ্রণ.বিহীন দেখুন

Answer 8

ট্যাবলেট বা ডেস্কটপের মতো প্রিন্ট ভিউটি দেখতে বুটস্ট্র্যাপ অন্তর্ভুক্ত করা হয় less

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

ফাইলটির শেষে এই ভেরিয়েবলগুলি রাখার বিষয়ে চিন্তা করবেন না। LESS ভেরিয়েবলের অলস লোডিংকে সমর্থন করে যাতে সেগুলি প্রয়োগ করা হবে।

Answer 9

যদি আপনি এ 4 প্রিন্টে কলামগুলি রাখতে চান (যা প্রায় 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">