آموزش Bootstrap > کار با CSS و Bootstrap
کار با متن ( Text ) و فنون چاپ در Bootstrap
مقدمه کار با متن در bootstrap :
در این درس با کلاس ها و خواص مختلف CSS تعریف شده در bootstrap ، جهت قالب بندی و استایل دهی محتویات متنی صفحه ، مثل هدرها ( عنوان یا Heading ) ، پاراگراف ها و ... آشنا خواهید شد .
اندازه پیش فرض متن ( font-size ) در bootstrap ، مقدار 14px و میزان بلندی خطوط 1.428 می باشد .
قلم پیش فرض مورد استفاده نیز Helvetica ، Arial و sans-serif بوده که مجموع این خواص به بخش <body> و
کل پاراگراف های صفحه ( تگ های <p> ) اعمال می شوند.
علاوه بر خواص فوق ، تگ <p> در bootstrap دارای یک حاشیه پایینی ( Bottom-margin ) به اندازه نصف ارتفاع خطوط ، یعنی تقریبا معادل 10px می باشد .
کار با عنوان ها و هدرها ( Heading ) در bootstrap :
شما می توانید تگ های عنوان <h1> تا <h6> را همانند روشی که در HTML استفاده می کردید ، در bootstrap نیز تعریف کنید . bootstrap به صورت خودکار ، استایل خاصی را به این نوع نوشته ها می دهد :
<div class="container">
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>
|
|
|
همچنین می توانید به وسیله تگ <small> و یا تگ <span> که دارای کلاس small. می باشد ، یک عنوان کوچکتر را به دنباله هدر خود اضافه نمایید . نحوه انجام این کار در
مثال زیر نمایش داده شده است :
<div class="container">
<h1>متن کوچکتر و کم رنگ تر در ادامه عنوان ها</h1>
<p> می توانید یک متن کوچکتر و کم رنگ تر را در ادامه عنوان خود قرار دهید small به وسیله تگ</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :