آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش 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 به صورت خودکار ، استایل خاصی را به این نوع نوشته ها می دهد :

Example
<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. می باشد ، یک عنوان کوچکتر را به دنباله هدر خود اضافه نمایید . نحوه انجام این کار در مثال زیر نمایش داده شده است :

Example
<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 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1